JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
    <th>Occupation and Employer</th>
    <th>Add</th>
    <tr>
        <td>
            <input type="text" id="txtName1" />
        </td>
        <td>
            <input type="text" id="txtAge1" />
        </td>
        <td>
            <input type="text" id="txtGender1" />
        </td>
        <td>
            <input type="text" id="txtOccupation1" />
        </td>
        <td id="btnAdd" class="button-add">Add</td>
    </tr>
</table>

CSS

.button-add {
    cursor:pointer;
}

JavaScript

var ctr = 1;
$('#myTable').on('click', '.button-add', function () {
    ctr++;
    alert(ctr);
    var txtName = "txtName" + ctr;
    var txtAge = "txtAge" + ctr;
    var txtGender = "txtGender" + ctr;
    var txtOccupation = "txtOccupation" + ctr;
    var newTr = '<tr><td><input  id=' + txtName + ' /></td><td><input type="text" id=' + txtAge + ' /></td><td><input type="text" id=' + txtGender + ' /></td><td><input type="text" id=' + txtOccupation + ' /></td><td id="btnAdd" class="button-add">Add</td></tr>';
    $('#myTable').append(newTr);
});