Написать калькулятор товаров на сайте

Необходимо реализовать калькулятор, вычисляющий общую стоимость покупки и изменяющий эту стоимость онлайн при добавлении/удалении единицы товара через +/-. Сам смог реализовать только начальное выведение цены, которая не реагирует ни на какие изменения.

    <div class="popup-2 mfp-hide">
  <div class="popup__container">
    <h1 class="h1__catalog h1__catalog_popup2">Соберите свой набор</h1>
    <div class="block--top block--top_popup2"><img class="box-pic" src="img/box.png" alt=""/>
      <div class="select__wrap select__wrap_popup2"><span class="bold">Продукт</span>
        <select class="choice-candy">
          <option>Фруктово-ореховые сладости</option>
          <option>Бананы в шоколаде</option>
          <option>Клубника в шоколаде</option>
          <option>Черешня в шоколаде</option>
        </select><span class="bold margin-top-22">Размер</span>
        <select class="size">
          <option>15 штук</option>
          <option>15 штук</option>
          <option>15 штук</option>
        </select>
        <div class="block__candy-price">Стоимость одной конфеты:<br> <span class="bold">50 рублей</span></div>
      </div>
    </div>
    <div class="block--middle">
      <ul class="catalog__assortiment">
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Турин</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Мятный</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Семечки    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Пур Пур    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Мромор</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+                                  </span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Банан</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Мускатный  </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>К кофе </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Трюфель</span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Ореховый   </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Орандж </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Грецкий мак    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Золотой    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Миндаль    </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+</span>
            </div>
          </div>
        </li>
        <li class="catalog__assortiment__item catalog__assortiment__item_popup2 margin-bottom-23"><img src="img/for_catalog.png" alt=""/>
          <div class="choice_wrap"><span>Бронзовый      </span>
            <div class="number_candy"><span class="minus">-</span>
              <input id="val" type="text" value="1" size="5"/><span class="plus">+      </span>
            </div>
          </div>
        </li>
      </ul>
      <div class="end_price">Итоговая стоимость: <span id="allPrice">0      </span><span>&#160 рублей                               </span></div>
    </div>
    <div class="block__order-form">
      <form class="form-order form-order-popup2">
        <label>Имя
          <input type="text"/>
        </label>
        <label>Телефон
          <input type="tel"/>
        </label>
        <input class="order-btn" type="submit" value="оформить заказ"/>
      </form>
    </div>
  </div>
</div>

    $(document).ready(function() {
    $('.minus').click(function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 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);
});