title: Write a product calculator on the site
body: <p>It is necessary to implement a calculator that calculates the total cost of the purchase and changes this cost online when adding / removing a unit of goods through +/-.</p>
  
  <p>I was able to realize only the initial price deduction, which does not react to any changes.
  <a href="http://prntscr.com/h2pd8k" rel="nofollow noreferrer">http://prntscr.com/h2pd8k</a> </p>
  
  <p><a href="https://i.stack.imgur.com/aG3pt.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      $('.minus').click(function () {
          var $input = $(this).parent().find('input');
          var count = parseInt($input.val()) - 1;
          count = count &lt; 1 ? 0 : count;
          $input.val(count);
          $input.change();
          return false;
      });
      $('.plus').click(function () {
          var $input = $(this).parent().find('input');
          $input.val(parseInt($input.val()) + 1);
          $input.change();
          return false;          
      });
      var result = document.getElementById("allPrice");
      result.innerHTML= parseInt(document.getElementById("val").value*15*50);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="popup-2 mfp-hide"&gt;
    &lt;div class="popup__container"&gt;
      &lt;h1 class="h1__catalog h1__catalog_popup2"&gt;Соберите свой набор&lt;/h1&gt;
      &lt;div class="block--top block--top_popup2"&gt;&lt;img class="box-pic" src="img/box.png" alt=""/&gt;
        &lt;div class="select__wrap select__wrap_popup2"&gt;&lt;span class="bold"&gt;Продукт&lt;/span&gt;
          &lt;select class="choice-candy"&gt;
            &lt;option&gt;Фруктово-ореховые сладости&lt;/option&gt;
            &lt;option&gt;Бананы в шоколаде&lt;/option&gt;
            &lt;option&gt;Клубника в шоколаде&lt;/option&gt;
            &lt;option&gt;Черешня в шоколаде&lt;/option&gt;
          &lt;/select&gt;&lt;span class="bold margin-top-22"&gt;Размер&lt;/span&gt;
          &lt;select class="size"&gt;
            &lt;option&gt;15 штук&lt;/option&gt;
            &lt;option&gt;15 штук&lt;/option&gt;
            &lt;option&gt;15 штук&lt;/option&gt;
          &lt;/select&gt;
          &lt;div class="block__candy-price"&gt;Стоимость одной конфеты:&lt;br&gt; &lt;span class="bold"&gt;50 рублей&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="block--middle"&gt;
        &lt;ul class="catalog__assortiment"&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Турин&lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Мятный&lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+                                  &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Семечки    &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+                                  &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Пур Пур    &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Мромор&lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+                                  &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Банан&lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Мускатный  &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;К кофе &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Трюфель&lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Ореховый   &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Орандж &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Грецкий мак    &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Золотой    &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Миндаль    &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"&gt;&lt;img src="img/for_catalog.png" alt=""/&gt;
            &lt;div class="choice_wrap"&gt;&lt;span&gt;Бронзовый      &lt;/span&gt;
              &lt;div class="number_candy"&gt;&lt;span class="minus"&gt;-&lt;/span&gt;
                &lt;input id="val" type="text" value="1" size="5"/&gt;&lt;span class="plus"&gt;+      &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="end_price"&gt;Итоговая стоимость: &lt;span id="allPrice"&gt;0      &lt;/span&gt;&lt;span&gt;&amp;#160 рублей                               &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="block__order-form"&gt;
        &lt;form class="form-order form-order-popup2"&gt;
          &lt;label&gt;Имя
            &lt;input type="text"/&gt;
          &lt;/label&gt;
          &lt;label&gt;Телефон
            &lt;input type="tel"/&gt;
          &lt;/label&gt;
          &lt;input class="order-btn" type="submit" value="оформить заказ"/&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>