<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"> <h2>simple GRID</h2> </div> <div class="row"> <h3 class="text-center text-primary">Persons</h3> <div class="col-md-12"> <table class="table table-hover" id="worked"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Telephone</th> <th> <button type="button" class="btn btn-blue add-row">+</button></th> </tr> </thead> <tbody> <tr> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <button type="button" class="btn btn-danger delete-row">-</button></td> </tr> <tr> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <button type="button" class="btn btn-danger delete-row">-</button></td> </tr> <tr> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <button type="button" class="btn btn-danger delete-row">-</button></td> </tr> <tr> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <input class="form-control" type="text"></td> <td> <button type="button" class="btn btn-danger delete-row">-</button></td> </tr> </tbody> </table> </div> </div> </div>

$(function () { $('#worked .add-row').click(function () { var template = '<tr><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><button type="button" class="btn btn-danger delete-row">-</button></td></tr>'; $('#worked tbody').append(template); }); $('#worked').on('click', '.delete-row', function () { $(this).parent().parent().remove(); }); })