JSFiddle - React, Tailwind, and code Playground

by AdamDrummond

HTML

<table cellpadding="10" style="border:2px solid black;" id="tabletomodify">
    <tr bgcolor="#360584">
        <td style="border:1px solid black;" colspan="15"><font face="Arial" size="4" color="white"><b><i>Records</i></b></font>

        </td>
    </tr>
    <tr>
        <td>
            <button id="AddRow">Add Row</button>
        </td>
        <td>
            <button id="DuplicateRow">Duplicate Row</button>
        </td>
        <td>
            <button id="DeleteRow">Delete Row</button>
        </td>
    </tr>
    <tr bgcolor="#360584">
        <td><font face="Arial" size="2" color="white">Name </font>

        </td>
        <td><font face="Arial" size="2" color="white">Date of Birth</font>

        </td>
        <td><font face="Arial" size="2" color="white">City</font>

        </td>
        <td><font face="Arial" size="2" color="white">State</font>

        </td>
        <td><font face="Arial" size="2" color="white">Country</font>

        </td>
        <td><font face="Arial" size="2" color="white">Phone Number</font>

        </td>
        <td><font face="Arial" size="2" color="white">Mail ID</font>

        </td>
        <td><font face="Arial" size="2" color="white">Select</font>

        </td>
    </tr>
    <tr id="row">
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <input type="checkbox" class="checkbox" />
        </td>
    </tr>
</table>

JavaScript

$(document).ready(

function () {
    $("#AddRow").click(

    function () {
        if ($('.checkbox').is(':checked')) {
            {
                //alert('hi') 
                var row = document.getElementById("row"); // find row to copy
                var table = document.getElementById("tabletomodify"); // find table to append to
                var clone = row.cloneNode(true); // copy children too
                clone.id = "row0"; // change id or other attributes/contents
                table.appendChild(clone); // add new row to end of table

            }

        }
    }

    );
});