将新数据输入SQL表时，平滑更新PHP表

So, I think I may be in over my head. I've looked around on here for a quite some time but have not been able to find something that will help me.

I am trying to build a display order from, similar to what you would see in a restaurant or fast food, that automatically and smoothly updates when a new entry has been entered into the MySQL table.

I tryed using AJAX but I could not get it to work

Main PHP page

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">       
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>

      <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <script src="js/fulfillment.js"></script>
      <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
      <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
   </head>
   <body>
    <div class="container">
       <h1>Orders</h1>
       <p>Area that displays all of the active and past orders.</p>
       <div align="right">
       <input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-on="Active" data-off="Past">
    </div>

    <!-- Active Orders -->
    <?php
       include '../connect.php';
       //get information form tblOrder
       $sql = "SELECT * FROM tblOrder WHERE Filled=0";
       $result = $db->query($sql);

       if (!$result) {
          die('Invalid query: ' . mysql_error());
       }
    ?>

    <!-- Build the table --> 
    <h2>Active</h2>
    <table ID = "myTable" class="table table-striped">
      <thead>
        <tr>
          <th>Order Number</th>
          <th>User ID</th> <!-- will turn to user name later down the road --> 
          <th>Food</th>
          <th>Pick Up Time</th>
          <th>Filled</th>
        </tr>
       </thead>
       <tbody>

     <?php 

     // run though tblOrders
     if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {

          //assign all of the values
          $OrderNumber = $row["Order_Number"];
          $FoodID = $row["F_ID"];
          $DrinkID = $row["D_ID"];
          $UserID = $row["User_ID"];
          $Filled = $row["Filled"];
          $RequestTime = $row["Request_Time"];?>

          <!-- out put each line of the value -->
          <tr>
            <td><?php echo $OrderNumber; ?></td>
            <td><?php echo $UserID; ?></td> <!-- switch to name once it is avalible -> 
            <td><!-- put food order here --></td>
            <td><?php echo $RequestTime; ?></td>
            <td><input type="button" class="btn btn-default" value="Complete"onclick="toPast(this, <?php echo $OrderNumber?>)"/></td>
          </tr>  

    <?php
    }
      }
      //close the data connection
      $db->close();
    ?>
   </tbody>
</table>

JavaScript

function toPast(btn, ONum) {
   var dataString = 'OrderNumber=' + ONum + '&UpdateNumber=' + '1';
   $.ajax({ 
     type: "POST",
     url: "update_sucess.php",
     data: dataString,
     cache: false,

     success: function(html) {
                 //alert(html);
                 var row = btn.parentNode.parentNode;
                 row.parentNode.removeChild(row);
              }
  });
}

Could anyone point me in the right direction or know someplace has a "how-to" on how to do this that I could read? image of what the table looks like