<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 ----------> <!-- Adapted https://bootsnipp.com/snippets/402bQ to include more intuitive buttons --> <div class="container"> <table id="myTable" class="table table-striped order-list"> <thead> <tr> <td class='width:40%'>Name</td> <td class='width:20%'>Email</td> <td>Phone</td> </tr> </thead> <tbody> <tr> <td> <input type="text" name="name" class="form-control" /> </td> <td> <input type="mail" name="mail" class="form-control"/> </td> <td> <input type="text" name="phone" class="form-control"/> </td> <td> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5" style="text-align: left;"> <button class="btn btn-primary" id="addrow"> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bell" fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"> <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z"></path> <path fill-rule="evenodd" d="M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"></path> </svg> Add row </button> </td> </tr> <tr> </tr> </tfoot> </table> </div>

$(document).ready(function () { var counter = 0; $("#addrow").on("click", function () { var newRow = $("<tr>"); var cols = ""; cols += '<td><input type="text" class="form-control" name="name' + 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>'; cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>'; newRow.append(cols); $("table.order-list").append(newRow); counter++; }); $("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)); }