<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"> <h2>Primary Attendee</h2> <table id="myTable1" class=" table order-list1"> <thead> <tr> <td>First Name</td> <td>Last Name</td> <td>Email</td> </tr> </thead> <tbody> <tr> <td class="col-sm-2"> <input type="text" name="name1" class="form-control" /> </td> <td class="col-sm-2"> <input type="text" name="sname1" class="form-control"/> </td> <td class="col-sm-2"> <input type="mail" name="mail1" class="form-control"/> </td> </tr> </tbody> </table> <h2>Addtional Attendees</h2> <table id="myTable" class=" table order-list"> <thead> <tr> <td>First Name</td> <td>Last Name</td> <td>Email</td> <td>AIA Member</td> <td>Member Id</td> </tr> </thead> <tbody> <tr> <td class="col-sm-2"> <input type="text" name="name" class="form-control" /> </td> <td class="col-sm-2"> <input type="text" name="sname" class="form-control"/> </td> <td class="col-sm-2"> <input type="mail" name="mail" class="form-control"/> </td> <td class="col-sm-2"> <input type="checkbox" name="phone" class="form-control"/> </td> <td class="col-sm-2"> <input type="text" name="memberid" class="form-control"/> </td> <td class="col-sm-2"><a class="deleteRow"></a> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"> </td> </tr> </tbody> <tfoot> <tr> <td colspan="1" style="text-align: left;"> <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Attendee" /> </td> </tr> <tr> </tr> </tfoot> </table> <hr/> <div class="row"> <div class="col-sm-2"> <input type="button" class="btn btn-lg btn-block " id="pay" value="Pay" /> </div> </div> </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="sname' + counter + '"/></td>'; cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>'; cols += '<td><input type="checkbox" class="form-control" name="phone' + counter + '"/></td>'; cols += '<td><input type="text" class="form-control" name="memberid' + 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)); }