<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <table id="myTable" class="table order-list"> <thead> <tr> <td>No</td> <td>Description</td> <td>Action</td> </tr> </thead> <tbody> <tr> <td class="col-sm-1"> <p class="number">1</p> </td> <td class="col-sm-4"> <input type="mail" name="mail" class="form-control"/> </td> <td class="col-sm-3"> <input type="text" name="phone" class="form-control"/> </td> </tr> <tr> <td class="col-sm-1"> <p class="number">2</p> </td> <td class="col-sm-4"> <input type="mail" name="mail" class="form-control"/> </td> <td class="col-sm-3"> <input type="text" name="phone" class="form-control"/> </td> </tr> <tr> <td class="col-sm-1"> <p class="numberLast">3</p> </td> <td class="col-sm-4"> <input type="mail" name="mail" class="form-control"/> </td> <td class="col-sm-3"> <input type="text" name="phone" class="form-control"/> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5" style="text-align: left;"> <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" /> </td> </tr> <tr> </tr> </tfoot> </table> </div>

$(document).ready(function () { var counter = $(".numberLast").text(); $("#addrow").on("click", function () { var newRow = $("<tr>"); var cols = ""; counter++; cols += '<td>'+ counter +'</td>'; cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>'; cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>'; newRow.append(cols); $("table.order-list").append(newRow); }); $("table.order-list").on("click", ".ibtnDel", function (event) { $(this).closest("tr").remove(); counter -= 1 }); }); function calculateRow(row) { var price = +row.find('input[name^="price"]').val(); } function calculateGrandTotal() { var grandTotal = 0; $("table.order-list").find('input[name^="price"]').each(function () { grandTotal += +$(this).val(); }); $("#grandtotal").text(grandTotal.toFixed(2)); }