<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"> <div class="control-group" id="fields"> <label class="control-label" for="field1">Nice Multiple Form Fields</label> <div class="controls"> <form role="form" autocomplete="off" class="form-inline"> <div class="entry input-group col-xs-7"> <span class="input-group-btn"> <button title="None selected" type="button" class="text-left btn btn-default" ><strong>AGE RANGE:</strong> None selected <b class="caret"></b></button> </span> <!-- <select class="form-control" name="values[]"> <option value="">Select one</option> <option value="1">Genre</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> --> <div class="input-group-addon">£</div> <input class="form-control" name="" type="text" placeholder="Type something" /> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <!-- <div class="form-group"> <div class="input-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <div class="input-group-addon">@</div> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> --> </form> <br> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small> </div> </div> </div> </div>

.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; } .form-control{ display:inline; float:left; width:auto; }

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