<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"> <h3>Product Attributes</h3> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another Product Attribute</small> <form role="form" autocomplete="off"> <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 300px;">Label</th> <th >Description</th> <th class="text-center" style="width: 90px;"> <button type="button" class="btn-add btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button> </th> </tr> </thead> <tbody class="container-items tableForm"> <tr class="controls"> <td class="vcenter"> <div class="form-group required"> <input type="text" class="form-control" name="attrLabel[]" placeholder="Product Attribute Description" maxlength="255"><p class="help-block help-block-error"></p> </div> </td> <td> <div class="form-group required" > <textarea class="form-control" rows="5" name="attrDesc[]" placeholder="Product Attribute Description"></textarea> </div> </td> <td class="text-center vcenter" style="width: 90px; "> <button type="button" class="btn-remove btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button> </td> </tr> </tbody> </table> </form> </div> </div>

$(function() { $(document).on('click', '.btn-add', function(e) { //alert("Adding control"); e.preventDefault(); var controlForm = $('form:first .tableForm'), currentEntry = controlForm.find('.controls:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('.form-control').val(''); }).on('click', '.btn-remove', function(e) { var thisControl = $(this).parents('tr.controls'); //if(!thisControl.is(':first-child')) if(thisControl.siblings().size() > 0) thisControl.remove(); else alert('Cannot remove the default'); e.preventDefault(); return false; }); });