<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="control-group" id="fields"> <div class="controls"> <form role="form" autocomplete="off"> <div style="width: 25%;float: left;" > <input class="form-control" placeholder="Name this snippet" name="voca" type="text" value="Dynamic Form Fields - Add & Remove BS3"> </div> </br> </br> <div style="width: 25%;float: left;"> <input class="form-control" placeholder="Name this snippet" name="vocatrans" type="text" value="Dynamic Form Fields - Add & Remove BS3"> </div> </br> </br> <div class="row"> <div class="voca"> <div class="col-md-3"> <input class="form-control" placeholder="Name this snippet" name="voca" type="text" value="Dynamic Form Fields - Add & Remove BS3"> </div> <div class="col-md-3"> <input class="form-control" placeholder="Name this snippet" name="vocatrans" type="text" value="Dynamic Form Fields - Add & Remove BS3"> </div> <div class="col-md-1"> <select class="form-control"> <option>1</option> <option>2</option> </select> </div> <button type="button" class="btn btn-success btn-add" > <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add more </button> </div> </div> </form> <br> </div> </div> </div>

.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; }

$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first'), currentEntry = $(this).parents('.voca:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.btn-add:not(:last)') .removeClass('btn-default').addClass('btn-danger') .removeClass('btn-add').addClass('btn-remove') .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove '); }).on('click', '.btn-remove', function(e) { $(this).parents('.voca:first').remove(); e.preventDefault(); return false; }); });