JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-striped table-bordered" id="entryTable">  
            <thead> ...
            </thead> 
            <tbody>
                <tr>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                    <td><a href="#" id="addRow">Add</a><br>
                        <a href="#" id="deleteRow">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>

JavaScript

var i = 1;
    $("#addRow").click(function(){

        $("table tr:last").clone().find("input, select, textarea").each(function(){
            $(this).val('').attr({
                'id': function(_,id){ return id+i},
                'name': function(_,name){ return name+i},
                'value':''
            });
        }).end().appendTo("table");
        i++;
    });
    $(document).on('click', '#deleteRow', function(){
        alert("delete clicked")
        $(this).parent().parent().remove();
    });