<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 ----------> <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> <div class= "container"> <br><br> <button id="add"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Another Item</button> <button id="remove"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span> 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="e.g Epson Printer"></td> </tr> <tr> <td>Type</td><td><input class="form-control" type="text" id="type" placeholder="e.g Hardware"></td> </tr> <tr> <td>Description</td><td><input class="form-control" type="text" id="type" placeholder="e.g Inkjet, Black, with free 3 cartridge "></td> </tr> <tr> <td>Unit Price</td><td><input class="form-control" type="text" id="item" placeholder="e.g 5,354.00"></td> </tr> <tr> <td>Quantity</td><td><input class="form-control" type="text" id="qty" placeholder="e.g 3"></td> </tr> <tr> <td>Amount</td><td ><input class="form-control" type="text" id="amount" placeholder="Amount per item displayed here" disabled></td> </tr> </table> </div> </div>

#div1 td{ font: 20px grey; font-family: 'Pacifico', cursive; padding: 6px; } #div1{ width:30%; margin-left: 5%; border-radius: 5px; } #table{ width: 100%; margin-bottom: 5px; background: #e06377; border-radius: 5px; color: white; box-shadow: 6px 6px 3px lightgrey; } #add{ border-radius: 5px; background-color:#96ceb4 ; margin-left: 8%; color: white; } #remove{ border-radius: 5px; background-color:#ff6f69; color: white; } input[type="text"], textarea { background-color :#f7cac95; } input[type="text"]{ color: #c94c4c; border: 2px solid #ffeead; font-family: times; } ::-webkit-input-placeholder { font-style: italic; } ::-moz-placeholder { font-style: italic; } input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid white; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px white; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid white; }

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