<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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> <div class="container"> <div class='row'> <div class='col-md-8 www-row'> <div class='row entry'> <div class="col-md-8"> <div class='input-group'> <label for='www1' class='sr-only'>Online</label> <span class='input-group-addon bg-none border-none'><i class='fa fa-globe fa-fw' aria-hidden='true'></i></span> <input type='hidden' name='wwwtype[]' class='www-type' id='inputTypeWWW-1' value='other'> <input type='text' name='www[]' class='form-control input-sm bbo www-url' id='inputWWW-1' placeholder='Enter a web address' maxlength='128' value=''> </div> </div> <div class="col-md-4"> <div class='input-group row'> <input type='text' name='www_label[]' class='form-control input-sm bbo www-ttitle' id='labelWWW-1' placeholder='Short title' maxlength='128' value=''> <span class='input-group-addon bg-none border-none btn-add'><i class='fa fa-plus fa-fw' aria-hidden='true'></i></span> </div> </div> </div> </div> </div> </div>

.border-none{border:0px;} .bg-none{background:transparent} .bbo{border-left:0px;border-top:0px;border-right:0px;box-shadow:none;-webkit-box-shadow:none;border-radius:0px;} .bbo:focus{box-shadow:none;-webkit-box-shadow:none;}

$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var label_n = $( '[name="www_label[]"]' ); var nextIdInc = 1; var controlForm = $('.www-row'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); nextIdInc = nextIdInc + 1; newEntry.find('input').val(''); newEntry.find('input.www-url').attr('id','inputWWW-' + nextIdInc); newEntry.find('input.www-type').attr('id','inputTypeWWW-' + nextIdInc); newEntry.find('input.www-ttitle').attr('id','labelWWW-' + nextIdInc); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .html('<i class="fa fa-trash fa-fw"></i>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });