<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>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <div class="row"> <div class="col-lg-2"> <label>Name</label> </div> <div class="col-lg-4"> <div class="form-group"> <input id="name" type="text" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-lg-2"> <label>Address</label> </div> <div class="col-lg-4"> <div class="form-group"> <input id="addr" type="text" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-lg-2 col-lg-offset-2"> <button id="addBtn" class="addBtn form-control btn btn-primary"> Add to Row </button> </div> </div> <br> <div class="row"> <div class="col-lg-12"> <table id="example" class="table table-bordered"> <thead> <tr> <th class="col-lg-1 text-center">No</th> <th class="col-lg-3 text-center">Name</th> <th class="col-lg-7 text-center">Address</th> <th class="col-lg-1 text-center">Actions</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div>

#example table { counter-reset: rowNumber; } #example table tr > td:first-child { counter-increment: rowNumber; } #example table tr td:first-child::before { content: counter(rowNumber); min-width: 1em; margin-right: 0.5em; }

$(document).ready(function(){ var i = 1; $(".addBtn").click(function(){ var name = $("#name").val(); var addr = $("#addr").val(); var markup = "<tr><td>"+i+"</td><td>" + name + "</td><td>" + addr + "</td><td><button class='btn btn-small delBtn'>Hapus</button></td></tr>"; $("table tbody").append(markup); i++; }); $(function () { $("table").on("click", ".delBtn", function () { $(this).closest('tr').remove(); }); }); });