How to refresh page every 60 seconds without losing existing data in div?

I am implementing a food status tracker where I have an order no for each order.

When the page loads, I perform an AJAX call to get the current status of the order. This status is appended to my div. Now when my admin will change the status of the order, I want the new status to append to the div without the current status being lost.

I tried doing it, but when my page reloads, the past status is lost.

Here is part of the code:

<!-- I used this for page reload -->
<meta http-equiv="refresh" content="60"/>

<div id="progressbar" style="border:1px solid white;width:75%;margin:20px auto; display: flex; 
  padding:10px; flex-wrap: wrap;flex-direction: row; justify-content: space-around;">

</div>

<script>
    $(document).ready(function()
    {
        var orderNo = "<?php echo $orderNo; ?>"; 
        alert(orderNo);

        $.ajax({
            url:'action.php', 
            method:'post',
            data:{orderNo,orderNo},
            success:function(response)
            {
                $("#progressbar").append(response);
            }

        });

    });

</script>

And then in my action.php file:

// ORDER PROGRESS
if (isset($_POST['orderNo']))
{
    $orderNo=$_POST['orderNo'];

    $orderSt="SELECT O_Status from orders WHERE O_No='$orderNo'";

    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $orderRes=$conn->query($orderSt);

     $orderRow=$orderRes->fetch(PDO::FETCH_ASSOC);
     $orderStatus=$orderRow['O_Status'];
     echo $orderStatus;

}

For reloading the page I used:

<meta http-equiv="refresh" content="60"/>

Instead of reloading the entire page you could just make the AJAX call every 60 seconds instead. To achieve that put the AJAX call in a function and use a setTimeout() call in the success callback of the AJAX request to invoke the function again with the given delay.

jQuery($ => {
  var orderNo = "<?php echo $orderNo; ?>";

  function getData() {
    $.ajax({
      url: 'action.php',
      method: 'post',
      data: {
        orderNo: orderNo
      },
      success: function(response) {
        $("#progressbar").append(response);
        setTimeout(getData, 60000); // repeat in 60 secs, if AJAX was successful
      }
    });
  }

  getData(); // on load
});

Note that the key/value pairs in the object you provide need to be separated by :, not ,. I presume this was just a typo in the question.