<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="control-group" id="fields"> <label class="control-label" for="field1">Multiple Form Fields Example</label> <div class="controls"> <form role="form" autocomplete="off"> <div class="entry input-group col-xs-3"> <div class="input-append"> <input class="form-control" name="fields[]" type="text" placeholder="Type something..." /> <button class="btn btn-info add-more" type="button"><i class="icon-plus icon-white"></i></button> </div> </div> </form> </div> </div> </div> </div>

$(function() { $(document).on('click', '.add-more', function(e) { e.preventDefault(); var controlForm = $('.controls form:first'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .add-more') .removeClass('add-more').addClass('btn-remove') .removeClass('btn-info').addClass('btn-danger') .html('<i class="icon-remove icon-white"></i>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });