Обновить HTML таблицу при обновлении API

Question

Я просто делаю простой интерфейс для отображения заказов из магазина Woocommerce. Я успешно получаю ответ JSON и помещаю его в таблицу HTML. Но мне нужно обновить таблицу, не обновляя всю страницу или таблицу. На самом деле мне нужно, чтобы всякий раз, когда Woocommerce получает заказ, таблица HTML должна обновляться при выделении строки. Я использую AJAX для обновления таблицы, но не обновляюсь. Примечание. Я попытался установить определенный интервал времени для обновления страницы, но подумал, что это не будет хорошим решением. Пока я получил это ниже.

**

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url: "https://localhost/site/wp-json/wc/v3/orders?consumer_key=key&consumer_secret=key1",
        dataType: 'json',
        type: 'get',
        cache:false,
        success: function(data){
            console.log(data);
            var event_data = '';
            $.each(data, function(index, value){
                /*console.log(value);*/
                event_data += '<tr>';
                event_data += '<td>'+value.id+'</td>';
                event_data += '<td>'+value.billing.first_name + value.billing.last_name+'</td>';
                event_data += '<td>'+value.date_created+'</td>';
                event_data += '<td>'+value.billing.phone+'</td>';
                event_data += '<td>'+value.billing.address_1 + ", " + value.billing.address_2 + ", " + value.billing.city + value.billing.postcode +'</td>';
                event_data += '<td>'+value.total+'</td>';
                event_data += '</tr>';
            });
            $("#data").append(event_data);
        },
        error: function(d){
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
});
</script>

**

Любые предложения, пожалуйста.