JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<input type="button" id="addAmendment">
<table id="tblAmendments" runat="server" class="table table-hover table-striped">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>Date of Amendment</th>
                                                <th>Balance Prior to Amendment</th>
                                                <th>Any Aditional Capital Reductions</th>
                                                <th>Amount of Capital Reductions</th>
                                                <th>Date of Capital Reductions</th>
                                                <th>Term Amendment Actioned</th>
                                            </tr>
                                        </thead>
                                        <tfoot >
                                            <tr class="foot">
                                                <th></th>
                                                <th>Date of Amendment</th>
                                                <th>Balance Prior to Amendment</th>
                                                <th>Any Aditional Capital Reductions</th>
                                                <th>Amount of Capital Reductions</th>
                                                <th>Date of Capital Reductions</th>
                                                <th>Term Amendment Actioned</th>
                                            </tr>
                                        </tfoot>
                                        <tbody id="amendmentDetails">
                                        </tbody>

                                    </table>

CSS

.foot {
    display: none;
}

JavaScript

$(document).ready(function(){

        $("#addAmendment")
            .click(function (evt) {
                var row = "<tr>" +
                    "<td> <input type='button' class='fa-trash'></td>" +
                    "<td>" + 1 + "</td>" +
                    "<td>" + 1 + "</td>" +
                    "<td>" + 1 + "</td>" +
                    "<td>" + 1 + "</td>" +
                    "<td>" + 1 + "</td>" +
                    "<td>" + 1 + "</td>" +
                    "<tr>";
                $("#amendmentDetails").append(row);

                console.log(row);

                $(".fa-trash").bind("click", Delete);

            });
});
            
            function Delete() {
    var par = $(this).parent().parent(); //tr 
    par.remove();
};