How do I make an ajax call perform a function only once

Basically, I am implementing a food status tracking for an order based on orderNo. I refresh the page every 60 seconds, to append the new status in my div. However, for the start as the order is placed, I have a ‘waiting’ status. I don’t want the same status to get appended to my div every 60s before the status is changed by the admin. How do I achieve that? Also, is it possible to have the appended statuses if I open the page after a while? For instance, if status=’Preparation’, I want to have ‘Waiting’, ‘Confirmed’ to appear whenever I open the page. Thanks

<script>
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
 });

</script>

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'];


     if ($orderStatus=='Waiting')
     {
        echo "<div style='height:200px; width:200px; text-align: center'>
                <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                  <h6>WAITING FOR CONFIRMATION</h6>
              </div>";


     }

}

Answer

let status = '<li>PENDING</li>';

var updateStatus = function(){
  $('#status').html('');
  $('#status').append(status);
  setTimeout(updateStatus,6000);
}

updateStatus();

$(document).on('click','#changeStatus',function(){
status = '<li>ACCEPTED</li><li>PENDING</li>';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="status">
</ul>

<button type="button" id="changeStatus">Mark as ACCEPTED</button>

Assuming that you are updating the same cell every time, this is what you can do:

    // your existing code here
        $orderStatus=$orderRow['O_Status'];
        switch($orderStatus){
          case 'waiting':
             $response = '<div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>WAITING FOR CONFIRMATION</h6>
                  </div>';
             break;

          case 'confirmed':
             $response = '<div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>WAITING FOR CONFIRMATION</h6>
                  </div>
                  <div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>CONFIRMED</h6>
                  </div>';
             break;
          case 'preparation':
             $response = '<div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>Preparing</h6>
                  </div>
    <div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>CONFIRMED</h6>
                  </div>
    <div style='height:200px; width:200px; text-align: center'>
                    <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                      <h6>WAITING FOR CONFIRMATION</h6>
                  </div>'
                break;
           default:
            $response = '<div style='height:200px; width:200px; text-align: center'>
                <img style='height:150px; width:150px' src='foodStatusImages/Waiting.png'>
                  <h6>WAITING FOR CONFIRMATION</h6>
              </div>'
            break;
}
return $response;

You can clean up the code the way you want to, idea is to clean the div and append all the data.

Another option is to show all the status in front end and disable the pending status, then get the current status and enable the status that are supposed to be completed like, if status is preparing it is obvious that is has been accepted and confirmed.