如何使计数函数正确地用于所有动态生成的按钮？

Question

每次按下按钮时，我都会编写一个添加1的代码，同时也会动态生成按钮，表行也是如此。问题是，如果有第二行或第三行，则无法使函数正常工作。我知道问题在于每个按钮都有相同的类，因此计数总是会在另一个按钮停止的地方取出来。

$("form").submit(function(e){  
    e.preventDefault();  
    var name = $("input[name='name']").val(); 
     
   
    $(".data-table tbody").append("<tr data-name='"+name+"' class='vote'><td>"+name+"</td><td><button class='but' id="+name+">VOTE</button></td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td><td></td></tr>");  
    $("input[name='name']").val(''); 
    });
// the code to count
let count = 1;
$("tbody").on("click", ".but", function(){

        $(this).parents("tr").find("td:eq(3)").html('<span>'+count+'</span>');
        return count++;
        
    }); 

说清楚.#1名字按钮数约翰4简0

#2在简名字按钮上按下一次按钮后，数约翰4简5，我想在简上按下相应的按钮时，能数简的号码。

另外，我尽量不使用任何插件

谢谢你的帮助。

Answer 1

第一次替换

       `<button class='but' id="+name+">VOTE</button> `

与

       <button class='but' id="+name+" data-count="clicked-0">VOTE</button>

现在您的计数代码

$("tbody").on("click", ".but", function() {
    let obj = $(this);
    let clicks = obj.attr('data-count').replace('clicked-','');
    clicks++;
    obj.attr('data-count','clicked-'+clicks);
    obj.parents("tr").find("td:eq(3)").html('<span>' + clicks + '</span>');
});