skinaly

desc

HTML

<h4 class="title google-alert alert-notice"><i class="fa fa-shopping-cart fa-lg text-primary"></i>  <span>Заказать стеклянный фартук для кухни</span></h4>
<div class="text-primary">* обязательное поле</div>


<form method="POST" action="#" accept-charset="UTF-8" class="go-right calculator" enctype="multipart/form-data">

  <input name="calc" type="hidden" value="skinali">

  <div class="row">
    <div class="form-group col-xs-6 col-sm-4">
      <h4>1-ое стекло</h4></div>
    <div class="form-group col-xs-3 col-sm-4">
      <input name="size_b1" type="text" class="form-control">
      <label for="size_b">Ширина, мм</label>
    </div>
    <div class="form-group col-xs-3 col-sm-4">
      <input name="size_h1" type="text" class="form-control">
      <label for="size_h">Высота, мм</label>
    </div>
  </div>

  <div class="row field_wrapper"></div>
  <div class="row add_button"><a href="javascript:void(0);" title="Add field">ещё стекло</a></div>
  <div class="row del_button"></div>




  <div class="form-group col-xs-6">
    <h4>Кол-во блоков розеток, шт.</h4></div>
  <div class="form-group col-xs-6">
    <input type="text" name="rozetki" class="form-control">
    <label for="rozetki">Кол-во блоков розеток, шт.</label>
  </div>
  <div class="row" style="width:100%;"></div>

  <div class="form-group col-xs-6">
    <h4>Кол-во отверстий, шт.</h4></div>
  <div class="form-group col-xs-6">
    <input type="text" name="otverstija" class="form-control">
    <label for="otverstija">Кол-во отверстий</label>
  </div>
  <div class="row" style="width:100%;"></div>

  <div class="form-group col-xs-6">
    <h4>Кол-во крепежей, шт. (винты с блестящей крышкой)</h4></div>
  <div class="form-group col-xs-6">
    <input type="text" name="krepej" class="form-control">
    <label for="krepej">Кол-во крепежей</label>
  </div>
  <div class="row" style="width:100%;"></div>



  <div class="col-xs-6">
    <h4>Стекло</h4></div>
  <div class="col-xs-6">
    <div class="custom-dropdown...

JavaScript

$(document).ready(function() {


  // Add/Remove Input Fields Dynamically
  var maxField = 10; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var delButton = $('.del_button'); //Del button selector
  var delButtonHTML = '<a href="javascript:void(0);" class="remove_button" title="Remove field">удалить стекло</a>'; //Add button selector


  var wrapper = $('.field_wrapper'); //Input field wrapper
  var x = 1; //Initial field counter is 1


  $(addButton).click(function(e) { //Once add button is clicked
    e.preventDefault();
    if (x < maxField) { //Check maximum number of input fields
      var y = x + 1;
      var fieldHTML = '<div class="row moreglass"><div class="form-group col-xs-6 col-sm-4"><h4>' + y + '-е стекло</h4></div><div class="form-group col-xs-3 col-sm-4"><input name="size_b' + y + '" type="text" class="form-control"><label for="size_b">Ширина, мм</label></div><div class="form-group col-xs-3 col-sm-4"><input name="size_h' + y + '" type="text" class="form-control"><label for="size_h">Высота, мм</label></div></div>'; //New input field html 

      $(wrapper).append(fieldHTML); // Add field html
      $("a.remove_button").remove(); // Add delete button html
      $(delButton).append(delButtonHTML); // Add delete button html

      x++; //Increment field counter

    }
  });
  $(wrapper).on('click', '.remove_button', function(e) { //Once remove button is clicked
    e.preventDefault();
    $('.field_wrapper :last-child').remove(); //Remove field html
    x--; //Decrement field counter
    y--;
  });



  // обработка ввода пользователя

  $('input[name^="size_b"]').change(function() {
    $('.result').children('.razmer').html($(this).val() + 'x' + $('input[name^="size_h"]').val());
    calculation();
  });

  $('input[name^="size_h"]').change(function() {
    $('.result').children('.razmer').html($('input[name^="size_b"]').val() + 'x' + $(this).val());
    calculation();
  });

 ...