JSFiddle - React, Tailwind, and code Playground

by Alexandru Mihai

HTML

<button>Add new list item</button>
    <p>Click the above button to dynamically add new list items. You can remove it later.</p>
    <table id="main">
    <tr>
        <td>list item 1 </td>
        <td><input type='text' name='textN' id='textN' value='asdf'/></td>
        <td>list item 3 </td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    <tr>
        <td>list item 4</td>
        <td><input type='text' name='textN' id='textN' value='asdf2'/></td>
        <td>list item 6</td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    <tr>
        <td>list item 7</td>
        <td><input type='text' name='textN' id='textN' value='asdf3'/></td>
        <td>list item 9</td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    </table>
    <a name="texti" id="texti"> x </a>

JavaScript

$('#main').on("click", 'input[type="button"]', function () {
                var customerId = $(this).parent().siblings('td:eq(1)').find('input').val();
                $('#texti').text(customerId);
            });