使用php运行对mysql的常量查询而不刷新HTML页面

Im looking at outputting mysql query results into a table on a php page where the 1st column of the table is the result and the 2nd column is populated with a Javascript timer

however my goal is to have it so that when data comes into the mysql database it display on the table and then when it stops being picked up by the query remove it from the table

the issue i face however is im not sure how to do this without resetting the javascript timer everytime the query is run,

I have gone through a couple of questions that have mentioned to use ajax and this would be fine but im not sure what i would put the HTML side

EDIT: the below is now my second attempt code using ajax but i cant get the table to display it errors as unexpected token < line 27

my current page load Code to call the data is as followed:

PHP

<?php
header('Content-type: application/json');
$servername = "localhost";
$username = "user";
$password = "password";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 
#   header('Content-Type: applicaton/json');

$sql = "SELECT 
* 
FROM
(SELECT
  beacon,location,
  COUNT(location) AS counter 
FROM `track`
WHERE `date` = CURDATE() and `time` > NOW() - interval 60 second
GROUP BY beacon) AS SubQueryTable
ORDER BY beacon + 0 ASC;";
$result = $conn->query($sql);


$result = mysqli_query($conn ,  $sql);
   $rows = array();
   while($r = mysqli_fetch_assoc($result)) {
  $rows[] = $r;
    }

   echo json_encode($rows);
    $conn->close();
?>

HTML

    $.get('vendor/fetch.php', function(response) {
        console.log(response);
        var row;
        response.forEach(function(item, index) {
            console.log(item);

(unexpexted token here) 
<table id="table">
    <?php
    while($row = mysqli_fetch_array($result))
    {
    ?>
    <tr style="background-color: <?php echo $row['item.location'];?>">
    <td><?php echo $row['item.beacon'];?></td>
    <td> <span class='minutes'>00</span>:<span class='seconds'>00</span> 
    </td>
    </tr>

    <?php } 

    mysqli_close($con);  
    ?>
    </table>
        });
    });


        function updateTable() {
        //console.log('function called');
        $.get('vendor/fetch.php', function(response) {
            response.forEach(function(item, index) {
                console.log(item.beacon);

            });
        });

    var updateTableInterval = setInterval(updateTable, 100);
    };
</script>

 </head>

 <body>
<script>
var sec = 0;

function pad(val) {
return val > 9 ? val : "0" + val;
}
var timer = setInterval(function () {
$(".seconds").html(pad(++sec % 60));
$(".minutes").html(pad(parseInt(sec / 60, 10)));
}, 1000);
</script> 
</body>