JSFiddle - React, Tailwind, and code Playground

by goblin8384

HTML

<h2>Option Two</h2>
<p>Correct results are returned irrespective of number of columns added</p>
<table id="sTable72">
  <tr>
    <td>First Cell</td>
    <td>Second Cell <input type="text" value="fred" name="fullname" /></td>
    <td>Third Cell <input type="text" value="bongo" name="instrument" /></td>
    <td><button class="iAddbutton">Do Something</button></td>
  <td><button class="add-column">Add Column</button></td>
  </tr>
  <tr>
    <td>First Cell</td>
    <td>Second Cell <input type="text" value="frank" name="fullname"/></td>
    <td>Third Cell <input type="text" value="symbols" name="instrument"/></td>
    <td><button class="iAddbutton">Do Something</button></td>
  <td><button class="add-column">Add Column</button></td>
  </tr>
</table>

JavaScript

<script>
$(function() {
  $(document ).on("click","#sTable72 button.iAddbutton",function() {
    let tr = $(this).closest('tr');
    let a = tr.find('input[name="fullname"]').val();
    let b = tr.find('input[name="instrument"]').val(); 
    alert('Table 2: ' + a + ' ' + b);    
  });
});
</script>