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:

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

  <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