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="txtName" /></td>
            <td><input type="text" id="txtAge" /></td>
            <td><input type="text" id="txtGender" /></td>
            <td><input type="text" id="txtOccupation" /></td>
            <td><input type="button" id="btnAdd" class="button-add" onClick="insertRow()" value="add"></input></td>
        </tr>
</table>

JavaScript

var index = 1;
    function insertRow(){
                var table=document.getElementById("myTable");
                var row=table.insertRow(table.rows.length);
                var cell1=row.insertCell(0);
                var t1= innerHTML="New Cell1";
                var cell2=row.insertCell(1);
                var t2=document.createElement("input");
                    t2.id = "txtAge"+index;
                    cell2.appendChild(t2);
                var cell3=row.insertCell(2);
                var t3=document.createElement("input");
                    t3.id = "txtGender"+index;
                    cell3.appendChild(t3);
                var cell4=row.insertCell(3);
                var t4=document.createElement("input");
                    t4.id = "txtOccupation"+index;
                    cell4.appendChild(t4);
          index++;

    }