<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"> <div class="row"> <div class="col-lg-12"> <h1>Table Records</h1> <table class="table table-bordered table-hover" id="tableAddRow"> <thead> <tr> <th>User Name</th> <th>Email</th> <th>Password</th> <th style="width:10px"><span class="glyphicon glyphicon-plus addBtn" id="addBtn_0"></span></th> </tr> </thead> <tbody> <tr id="tr_0"> <td><input type="text" id="userName" class="form-control"/></td> <td><input type="text" id="email" class="form-control" /></td> <td><input type="text" id="password" class="form-control" /></td> <td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove_0"></span></td> </tr> </tbody> </table> </div> </div> </div>

$(document).ready(function () { $('.addBtn').on('click', function () { //var trID; //trID = $(this).closest('tr'); // table row ID addTableRow(); }); $('.addBtnRemove').click(function () { $(this).closest('tr').remove(); }) var i = 1; function addTableRow() { var tempTr = $('<tr><td><input type="text" id="userName_' + i + '" class="form-control"/></td><td><input type="text" id="email_' + i + '" class="form-control" /></td><td><input type="text" id="password_' + i + '" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtn_' + i + '"></span></td></tr>').on('click', function () { $(this).closest('tr').remove(); $(document.body).on('click', '.TreatmentHistoryRemove', function (e) { $(this).closest('tr').remove(); }); }); $("#tableAddRow").append(tempTr) i++; } });