JSFiddle - React, Tailwind, and code Playground

by jyrkim

HTML

<div class="refForm">
    <table width="99%" border="1" id="annextable" style="border-collapse:collapse" align="center">
        <thead>
            <tr style="background:#ddd;">
                <th>S.No</th>
                <th>Name</th>
                <th>Designation</th>
                <th>Address</th>
                <th>Email</th>
                <th>Mobile</th>
                <th>PAN</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="aux">
            <tr>
                <td align="center">1</td>
                <td align="center">
                    <input type="text" name="ref_name[]" id="ref_name" />
                    <br/><span id="refNm_error">Please fill</span>

                </td>
                <td align="center">
                    <input type="text" name="ref_desg[]" id="ref_desg" />
                </td>
                <td align="center">
                    <input type="text" name="ref_address[]" id="ref_address" />
                </td>
                <td align="center">
                    <input type="text" name="ref_email[]" id="ref_email" />
                </td>
                <td align="center">
                    <input type="text" name="ref_mobile[]" id="ref_mobile" />
                </td>
                <td align="center">
                    <input type="text" name="ref_pan[]" id="ref_pan" />
                </td>
                <td align="center">	<span class="addRowAux">Add</span>&nbsp;&nbsp;<span class="removeRowaux">Remove</span>

                </td>
            </tr>
        </tbody>
    </table>
    <input type="button" onclick="yoVal()" value="Test" id="hods" />
</div>

JavaScript

$(function () {


    $(document).on("click", ".addRowAux", function () {
        /*var valanx1 = $(this).parents("tr").children("td:nth-child(2)").children("input").val();
	var valanx2 = $(this).parents("tr").children("td:nth-child(3)").children("input").val();
	var valanx3 = $(this).parents("tr").children("td:nth-child(4)").children("select").val();
	var valanx4 = $(this).parents("tr").children("td:nth-child(4)").children("input").val();*/

        var countrow = $("#annextable tr").length;
        //console.log(countrow);

        /*countrow++;*/
        if (countrow < 11) {
            $("#aux").append('<tr><td align="center">' + countrow + '</td><td align="center"><input type="text" name="ref_name[]" id="ref_name_' + countrow + '"/><span id="refNm_error_' + countrow + '">Please fill</span></td><td align="center"><input type="text" name="ref_desg[]" id="ref_desg_' + countrow + '"/></td><td align="center"><input type="text" name="ref_address[]" id="ref_address_' + countrow + '"/></td><td align="center"><input type="text" name="ref_email[]" id="ref_email_' + countrow + '"/></td><td align="center"><input type="text" name="ref_mobile[]" id="ref_mobile_' + countrow + '"/></td><td align="center"><input type="text" name="ref_pan[]" id="ref_pan_' + countrow + '"/></td><td align="center"><span class="addRowAux">Add</span>&nbsp;&nbsp;<span class="removeRowaux">Remove</span></td></tr>');
        } else {
            //countrow--;
            alert("Can not add more then 10 record.");
        }
    });


    $(document).on('click', '.removeRowaux', function () { // <-- changes 
        var countrow = $("#annextable tr").length;
        if (countrow > 3) {
            $(this).closest('tr').remove();
            var tblObj = document.getElementById('annextable');
            var no_of_rows = tblObj.rows.length;
            for (var i = 0; i < no_of_rows - 1; i++) {
                tblObj.rows[i + 1].cells[0].innerHTML = i + 1;
                tblObj.rows[i +...