<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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"> <div class="col-sm-12 col-md-10 col-md-offset-1"> <table class="table table-hover"> <thead> <tr> <th class="text-center">Brand Name</th> <th class="text-center">Item name</th> <th class="text-center">Item Quantity</th> <th class="text-center">Price</th> <th class="text-center">Total</th> <th> </th> </tr> </thead> <tbody id="tbody"> <tr> <td class="col-sm-1 col-md-1" style="text-align: left"> <select> <option>adsad</option> </select> </td> <td class="col-sm-1 col-md-1" style="text-align: left"> <select> <option>adsad</option> </select> </td> </td> <td class="col-sm-1 col-md-1" style="text-align: left"> <input type="email" class="form-control" id="exampleInputEmail1" value=""> </td> <td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td> <td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td> <td class="col-sm-1 col-md-1"> <button type="button" class="btn btn-danger" id="remove"> <span class="glyphicon glyphicon-remove"></span> Remove </button></td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td><h5> </h5></td> <td class="col-sm-1 col-md-1"> <button type="button" class="btn btn-primary btn-default" id="add"> <span class="glyphicon glyphicon-remove"></span> Add </button></td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td><h5>Subtotal</h5></td> <td class="text-right"><h5><strong>$24.59</strong></h5></td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td><h5>Estimated shipping</h5></td> <td class="text-right"><h5><strong>$6.94</strong></h5></td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td><h3>Total</h3></td> <td class="text-right"><h3><strong>$31.53</strong></h3></td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping </button></td> <td> <button type="button" class="btn btn-success"> Checkout <span class="glyphicon glyphicon-play"></span> </button></td> </tr> </tbody> </table> </div> </div> </div>

jQuery(function () { var scntDiv = jQuery('#tbody'); var j = 1; jQuery('#add').click(function () { jQuery( ).appendTo(scntDiv); j++; return false; }); jQuery('#remove').live('click', function () { if (j > 1) { jQuery(this).parents('tr').remove(); j--; } else { sweetAlert("Oops...", "Cannot delete", "error"); } return false; }); });