Insert row after current row

by rplantiko

HTML

<table id="myTable" class="order-list">
    <thead>
        <tr>
            <td></td>
            <td>Name</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
               <td style="text-align: left;">
                <input type="button" class="tdAdd" value="Add Row" />
            <td>
                <input type="text" name="name1" />
            </td>
            <td>
                <input type="text" name="price1" />
            </td>
            <td>
                <input type="button" value="Delete" class="ibtnDel"/>
            </td>
        </tr>
    </tbody>

           
 
</table>

JavaScript

$(document).on("click", '.tdAdd', function () {
            var counter = $('#myTable tbody tr').length + 1; 
            var newRow = $("<tr>");
            var cols = "";
            cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
            cols += '<td><input type="text" name="name' + counter + '"/></td>';
            cols += '<td><input type="text" name="price' + counter + '"/></td>';
            cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
            newRow.append(cols);
            newRow.insertAfter( $(this).closest("tr") );
        });
    
        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();
        });