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>

JavaScript

$("#test [type=button]").on("click",function(){
      alert("hi, eidt is fired on row "+$(this).data("index"));
  });

/* Almost same as 
var inputs =  $("#test [type=button]");
for(var i = 0 ; i < inputs.length;++i){
   inputs.eq(i).on("click",function(){
      alert("hi, eidt is fired on row "+$(this).data("index"));
   });
}
*/