如何在AJAX回调jQuery上更新/委托表数据

Question

如果找到新数据并从AJAX调用返回，我正在使用计时器从数据库进行实时更新。如果数据尚未存在，则应将数据添加到表中。

但即使我正在检查ID。每个循环都会反复添加相同的值。当我使用console.log时，我得到未定义的值，删除按钮不起作用。有没有办法在AJAX返回上委托表？或者是否有其他选项来确保不添加相同的值twize。

代码：

$(document).ready(function(){

    setInterval(function(){

        var data = ({
            'id':1
        });

        $.post("ajax.php", data, function(result){

            //get all ids in table
            var arr = [];
            $('.table tr').each(function (i, v) {
                arr.push($(this).data('id'));
            });

            //loop trough all results from ajax call
            $.each(result, function( index, value ){

                //add to table if id dossent exist
                if(jQuery.inArray(value.id, arr) == -1){
                    //add the new value to table
                    $('table > tbody > tr:first').before('<tr><td>'+value.id+'</td><td>'+value.name+'</td><td>'+value.email+'</td><td>'+value.date+'</td><td><button data-id="'+value.id+'" class="btn btn-danger btn-sm">Delete</button></td></tr>');
                }
            });

        },"json");

    },3000);
});