JSFiddle - React, Tailwind, and code Playground

by akshatha suchethan

HTML

<a href="#" id="insert-more"> Add New Row </a>

    <br>
<table class="table">
    <thead class="thead-inverse">
        <th>Col 1</th>
        <th>Col 2</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" id="name" class="form-control" name="gname">
            </td>
            <td>
                <input type="text" id="discuss" class="form-control" name="gdiscuss">
            </td>
             <td><input type="button" value="Delete"></td>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$('input[type="button"]').click(function(e){
   $(this).closest('tr').remove()
})


$("#insert-more").click(function () {
     $(".table").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' + $(this).html() + '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });
});