<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="row"> <div class="col-xs-4"> <form> <div class="form-group"> <label>Multiple fields</label> <div class="form-group input-group"> <input type="text" name="multiple[]" class="form-control"> <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+</button></span> </div> </div> </form> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12"> <form> <div class="form-group"> <label>Multiple fields</label> <div class="form-group input-group"> <input type="text" name="multiple[]" class="form-control"> <span class="input-group-btn"><button type="button" class="btn btn-default btn-add">+</button></span> </div> </div> </form> </div> </div> </div>

$( document ).on( 'click', '.btn-add', function ( event ) { event.preventDefault(); var field = $(this).closest( '.form-group' ); var field_new = field.clone(); $(this) .toggleClass( 'btn-default' ) .toggleClass( 'btn-add' ) .toggleClass( 'btn-danger' ) .toggleClass( 'btn-remove' ) .html( '–' ); field_new.find( 'input' ).val( '' ); field_new.insertAfter( field ); } ); $( document ).on( 'click', '.btn-remove', function ( event ) { event.preventDefault(); $(this).closest( '.form-group' ).remove(); } );