<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <div> <table id="tbr" class="table table-bordered"> <th> <tr> <td>#</td> <td>Item</td> <td>Amount</td> <td>Actions</td> </tr> </th> <tbody id="tbody"> </tbody> </table> <table> <tr> <td>#</td> <td> <input type="text" id="item"/> </td> <td> <input type="text" id="amount"/> </td> <td><button id="button">Add Row</button></td> </tr> </table> </div>

.table-sortable tbody tr { cursor: move; }

$(function(){ $('#button').click(function() { var item = $('#item').val(); var amount = $('#amount').val(); var html = "<tr><td>id</td><td>" + item + "</td><td>" + amount +"</td><td><a class='remove'>remove</a></td></tr>"; $('#tbody').append(html); $('#item').val(""); $('#amount').val(""); }); $('.remove').on('click',function(e) { e.preventDefault(); ($this).closest('tr').remove(); }) })