<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"> <br> <button id="add">Add Another Item</button> <button id="remove">Remove a table</button> <br><br> <div id="div1"> <table id="table"> <tr> <td>Item</td><td><input class="form-control" type="text" id="item" placeholder="items"></td> <td>type</td><td><input class="form-control" type="text" id="type" placeholder="type"></td> <td>Quantity</td><td><input class="form-control" type="text" id="qty" placeholder="quantity"></td> </tr> <tr> <td>Store</td><td><input class="form-control" type="text" id="item" placeholder="store"></td> <td>Description</td><td><input class="form-control" type="text" id="type" placeholder="desciption"></td> <td>Price</td><td><input class="form-control" type="text" id="qty" placeholder="Price"></td> </tr> </table> </div> </div>

#table { border-radius: 10px; background-color: #bec9db; margin-bottom: 5px; } td{ padding: 5px; } #add{ border-radius: 5px; background-color: #96ceb4; } #remove{ border-radius: 5px; background-color: #ff6f69; }

$(function(){ $("#remove").click(function(){ $("#table").remove(); }); }); $(function(){ $("#add").click(function(){ $("#table").clone().appendTo("#div1"); }); });