How to make the button stay in a row in php/json?

I have a php code as shown below. The below html/php code is working in a way that on adding rows, we can select date from every row and can save it as well. Now I am trying to add a button in a row. Here is the script(its entirely JS) which I have used in order to add a button (having any text) in a row.

The issue which I am having right now on adding rows is that the button do show up in every single row but after saving the form and coming back, the button disappears from every single row probably because nothing is getting saved in the JSON.

html/php code:

<?php
$output = array();     
$output['house_sitting_date']=$_POST['house_sitting_date'];
$output['row_delete']=$_POST['row_delete'];

$fp = fopen('../feeds/ptp-ess_landing_house.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);

if(file_exists('../feeds/ptp-ess_landing_house.json')){
    $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));
}
?>

<?php if($data) { ?>
<form method="post">
    <!-- Add New Row Button START -->
    <div class="plus-minus-button" style="text-align:center;">    
     <button type="button" id="addRow" onclick="rowAdd()">+</button>
    </div>
    <!-- Add New Row Button END -->
    <div id="rows" style="display:flex; justify-content: center;"> <!-- Big div START -->

    <!-- This is what I have tried to add a button (START) -->  
    <!-- Remove Button START -->
        <div class="rows-delete" style="text-align:center;">
         <h4 style="text-align:center;">Delete Rows</h4>
        <?php if (empty($data->row_delete)) { ?>
            <div class="row-delete" style="margin-right:30px; margin-top:20px;">
                <button type="button" name="row_delete[]" value="">Remove</button>
            </div>
        <?php } else {  ?>
        <?php  foreach ($data->row_delete as $row_delete){ ?>
            <div class="row-delete" style="margin-right:30px; margin-top:20px;">
                <button type="button" name="row_delete[]" value="<?php if($row_delete) {echo $row_delete;}?>">Remove</button>
            </div>
        <?php }} ?>
       </div>  
    <!-- Remove Button END -->
    <!-- This is what I have tried to add a button (END) -->    

    <!-- Sitting Date START -->
        <div class="sitting-days" style="text-align:center;">
         <h4 style="text-align:center;">Select Date</h4>
        <?php if (empty($data->house_sitting_date)) { ?>
            <!-- Select Date START -->
            <div class="select-date" style="margin-right:30px; margin-top:20px;">
                <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
            </div>
        <?php } else {  ?>
        <?php  foreach ($data->house_sitting_date as $date){ ?>
            <!-- Select Date START -->
            <div class="select-date" style="margin-right:30px; margin-top:20px;">
                <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">
            </div>
            <!-- Select Date END -->
        <?php }} ?>
       </div>  
    <!-- Sitting Date END -->
    </div>                                                          <!-- Big div END -->
</form>
<?php } else {
echo 'Cannot read JSON settings file';
}
?>

Problem Statement:

The issue which I am having right now that I can add as many rows as we want but the button doesn't stay after saving the form. Only rows containing the dates stay on the web-page.

I am wondering what changes I need to make in the php/javascript code above so that the button stay after saving the form. When I checked the JSON, nothing is getting saved there so probably that can be the reason why buttons doesn't stay after saving the form.

Edit 1:

In JSON (../feeds/ptp-ess_landing_house.json), it is null {"row_delete":null} so that's the reason why the button doesn't stay in every row after saving the form.