JSFiddle - React, Tailwind, and code Playground

HTML

<table id="test">
    <tr><td>List item1</td><td><input type="button" value="edit" data-index="1" /></td></tr>
    <tr><td>List item2</td><td><input type="button" value="edit" data-index="2" /></td></tr>
    <tr><td>List item3</td><td><input type="button" value="edit" data-index="3" /></td></tr>
    <tr><td>List item4</td><td><input type="button" value="edit" data-index="4" /></td></tr>
    <tr><td>List item5</td><td><input type="button" value="edit" data-index="5" /></td></tr>
    <tr><td>List item6</td><td><input type="button" value="edit" data-index="6" /></td></tr>
    <tr><td>List item7</td><td><input type="button" value="edit" data-index="7" /></td></tr>
</table>

<div>
    <input type="text" id="input" value="new item" />
    <input type="button" id="btn" value="add item" />
</div>

JavaScript

$("#test [type=button]").on("click.showalert",function(){ 
     //use showlaert event namespace to prevent off unexpected event
     alert("hi, eidt is fired on row "+$(this).data("index"));
 });
var index = $("#test [type=button]").length; //get last index
$("#btn").click(function(){
    index++;
    var html = $("#input").val(); //Note:Here might be xss issue, so this is just for example.
    $("#test").append('<tr><td>'+html+'</td><td><input type="button" value="edit" data-index="'+index+'" /></td></tr>');
    $("#test [type=button]").off("click.showalert").on("click.showalert",function(){
          alert("hi, eidt is fired on row "+$(this).data("index"));
     });
});