<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 id="calc" class="row text-center"> <form class="entry form-inline"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"></div> <input type="text" class="form-control" id="prodNamet" placeholder="Naam"> </div> </div> <div class="form-group"> <select class="form-control"> <option value="" disabled selected>Единица измерения</option> <option>Столовая ложка</option> <option>Чайная ложка</option> <option>Грамм</option> <option>Шт.</option> <option>Стакан (200 мл.)</option> <option>Стакан (250 мл.)</option> </select> </div> <button type="submit" class="btn btn-primary btn-add"><span class="glyphicon glyphicon-plus"></span></button> </form> </div> </div>

.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; }

$(function() { var i=1; $('#calc:first').find('.input-group-addon').html(i); $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('#calc:first'), currentEntry = $(this).parent('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); $(newEntry).find('.input-group-addon').html(++i); 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-minus"></span>'); }).on('click', '.btn-remove', function(e) { i--; $(this).parent().nextAll('.entry').each(function() { $(this).find('.input-group-addon').html($(this).find('.input-group-addon').html()-1); }); $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });