JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<table border="1" name="phoneTable" id="phoneTable" width="100%">
    <thead>
        <tr>
            <th>Primary</th>
            <th>Type</th>
            <th>Phone Number</th>
            <th>Details</th>
            <th>Add</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="radio" name="phonePrimary[]" />
            </td>
            <td>
                <select style="" name="phoneType[]">
                    <option value="1">NOT COMPLETED</option>
                    <option value="2">MOBILE</option>
                    <option value="3">HOME</option>
                    <option value="4">WORK</option>
                    <option value="5">NEAR BY</option>
                </select>
            </td>
            <td>
                <input type="text" style="width: 200px;" name="phoneNumber[]" />
            </td>
            <td>
                <input type="text" name="phoneDetails[]" />
            </td>
            <td>
                <button type="button" id="addButton">+ Add</button>
            </td>
            <td>
                <button type="button" id="deleteButton">- Delete</button>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$("#phoneTable").on('click', '#addButton', function() {
    //alert("Clicked the add! ");
    $('#phoneTable tr:last').after('<tr><td><input type="radio" name="phonePrimary[]"/></td><td><dropdown:DropdownPhoneType entities="${applicationBean.phoneTypes}" name="phoneType[]"/></td><td><input type="text" placeholder="(999) 999-9999" class="phone-mask textfield" data-tooltip="Please enter a valid <b>Number</b>" style="width: 200px;" name="phoneNumber[]" /></td><td><input type="text" name="phoneDetails[]" /></td><td><button class="button button-black" type="button" id="addButton">+ Add</button></td><td><button class="button button-black" type="button" id="deleteButton">- Delete </button></td></tr>');
    //$('#phoneTable  tbody > tr:last').clone(true, true).appendTo("#phoneTable");
    $('#phoneTable  tbody > tr:last').prev().find("button[id='addButton']").remove();
});

$("#phoneTable").on("click", "#deleteButton", function () {
    if ($("#phoneTable tbody > tr").length <= 1) {

        return false;
    }
    $('#phoneTable tbody > tr:nth-last-child(2) > td:nth-last-child(2)').append('<button type="button" id="addButton">+ Add</button>');
    $
    $('#phoneTable tbody > tr:last').fadeOut('slow', function () {
        $('#phoneTable tbody > tr:last').remove();
    });
    //alert('Delete Clicked');
});