<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="controls col-xs-8"> <form role="form" method="post" name="addLinks" action="" autocomplete="off"> <div class='form-group'> <label class="col-xs-1">Linki:</label> <div class="col-xs-11 no-padding" id="links"> <div class="entry input-group"> <div class="col-xs-7 no-padding"> <input class="form-control aaa" name="link_url[]" type="text" placeholder="http://" /> </div> <div class="col-xs-5"> <input class="form-control aaa" name="link_title[]" type="text" placeholder="Opis odnośnika" /> </div> <span class="input-group-btn"> <button class="btn btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </div> </form> </div> </div> </div> </div>

.entry:not(:first-of-type) { margin-top: 5px; } .no-padding { padding:0px; } input[type="text"], textarea, button { outline: none; box-shadow:none !important; } .aaa{border-bottom-width:1px ;border-top:0px;border-left:0px;border-right:0px;} .btn{background:transparent;}

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