<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="control-group" id="fields"> <label class="control-label" for="field1">Nice Multiple Form Fields</label> <div class="controls"> <form role="form" autocomplete="off"> <div class="entry form-group col-xs-12"> <label for="InputIBAN" class="col-md-1 control-label">IBAN</label> <div class="col-xs-3"> <div class="input-group"> <input type="text" class="form-control input-sm" id="InputIBAN" name="1[InputIBAN]" placeholder="IBAN ohne Leerzeichen"> <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-credit-card"></span></span> </div> </div> <label for="InputBIC" class="col-md-1 control-label">BIC</label> <div class="col-xs-3"> <div class="input-group"> <input type="text" class="form-control input-sm" id="InputBIC" name="1[InputBIC]" placeholder="BIC" value="GENODEF1MIR"> <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-home"></span></span> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control input-sm" id="InputKundenNummer" name="1[InputKundenNummer]" type="text" placeholder="1234500"> <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-user"></span></span> </div> </div> <div class="col-xs-1"> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </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; }

$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls form:first'), currentEntry = $(this).parents('.entry:first'), num = $('.form-group').length, newNum = new Number(num + 1), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); newEntry.find("input:text[id='InputIBAN']").attr('name', '' + newNum + '[InputIBAN]' ); newEntry.find("input:text[id='InputBIC']").attr('name', '' + newNum + '[InputBIC]' ); newEntry.find("input:text[id='InputKundenNummer']").attr('name', '' + newNum + '[InputInputKundenNummer]' ); controlForm.find('.entry:not(:last) .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; }); });