JSFiddle - React, Tailwind, and code Playground

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

$("#addButton").on("click", 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();                                    
                                });

                                $("#deleteButton").on("click", 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');
                                });