<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <fieldset> <h2 class="fs-title">Укажите размер москитки</h2><h3 class="fs-subtitle">Шаг 2</h3> <div class="row wh"> <!--<div class="form-group">--> <input type="text" class="form-control" name="width" placeholder="ширина, мм" /> <input type="text" class="form-control" name="height" placeholder="высота, мм" /> <!--</div>--> <span><button class="btn btn-add btn-success" type="button"><span class="fa fa-plus">+</span></button></span> </div> <p>Важно! Замеряйте размер открытого окна / дверного проёма по центру от резинки до резинки. <br>Пользуйтесь точной рулеткой.</p> <input type="button" name="previous" class="btn btn-warning prev action-button" value="Назад" /> <input type="button" name="next" class="btn btn-success next action-button" value="Продолжить" /> </fieldset>

$(document).ready(function() { var buttonadd = '<span class="col-md-2 to-right"><button class="btn btn-success btn-add" type="button"><span class="fa fa-plus">+</span></button></span>'; var rowclone = '<div class="rowclonned">'+$(".wh").html()+'</div>'; $(".wh").html(rowclone).after('<div class="row rowclone"></div>'); $(document).on('click', '.btn-add', function(e) { e.preventDefault(); $(".rowclone").append(rowclone); $(this).removeClass('btn-add').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<span class="fa fa-minus">—</span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.rowclonned').remove(); e.preventDefault(); return false; }); });