Q:

Работа с формами с одинаковым классом

Есть небольшой сайт, где нужно сделать возможность покупать товар, колличество товара очень маленькое, по этому загрузка в базу данных не вижу смысла, хотел пойти другим путем в виде стационарной формы на сайте.
есть 3 одинаковых блока с товаром(меняется только цена и картинка):
<div class="item_shop">
    <img src="<?php echo get_template_directory_uri();?>/images/*.jpg" alt="*">
    <span class="amount_item">
    20 €
    </span>
    <input type="hidden" class="amount_shop" value="20">
    <p>Qty:</p><input type="number" class="qty_shop" placeholder="0" name="qnty">
    <button class="add_shop">Add to cart</button>
</div>

И есть основная форма, где будет суммироватся колличество и сумма:
<form action="<?php echo $truepath ?>" method="POST">
<input type="disabled" name="qty" id="korzina_qty" class="korzina_input" placeholder="0">
<input type="number" name="amount" id="amount_shop">
<input type="image" class="shop_image" src="<?php echo get_template_directory_uri();?>/images/shoping.png" border="0" name="submit" alt="Shop">
</form>

JS которая суммирует все цифры в первой форме и добавляет в основную:
$(".add_shop").on('click', function(){
        var a = $('.amount_shop').val() * $('.qty_shop').val();
         $('#amount_shop').val(a + $(this).val());
         if($('#korzina_qty').val() == 0){
            $('#korzina_qty').val($('.qty_shop').val());
         }else{
         var b = Number($('.qty_shop').val()) + Number($('#korzina_qty').val());
         $('#korzina_qty').val(b);
         }
        $('.qty_shop').val(0);
    })

Но все это не будет работать на всех блоках, а только на первом. как можно реализовать чтобы работало на всех?

A:

Примерно так

<!DOCTYPE html>
<html>

<head>
  <title>titile</title>
  <meta charset="utf-8">
  <style>
    .item_shop {
      border: 1px solid #000;
      padding: 5px;
      margin: 5px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $(function() {
      $(".add_shop").on('click', function() {

        var item = $(this).parent('.item_shop');
        var count = parseInt(item.find('.qty_shop').eq(0).val(), 10) || 1;
        var price = parseInt(item.find('.amount_item').eq(0).text(), 10);
        var sum = count * price;

        var allSum = parseInt($('#amount_shop').val(), 10) || 0;
        var allCount = parseInt($('#korzina_qty').val(), 10) || 0;

        $('#amount_shop').val(allSum + sum);
        $('#korzina_qty').val(allCount + count);

      });
    });
  </script>
</head>

<body>

  <div class="item_shop">
    <img src="<?php echo get_template_directory_uri();?>/images/*.jpg" alt="*">
    <span class="amount_item">
   20 €
  </span>
    <input type="hidden" class="amount_shop" value="20">
    <p>Qty:</p>
    <input type="number" class="qty_shop" value="1" name="qnty">
    <button class="add_shop">Add to cart</button>
  </div>

  <div class="item_shop">
    <img src="<?php echo get_template_directory_uri();?>/images/*.jpg" alt="*">
    <span class="amount_item">
   50 €
  </span>
    <input type="hidden" class="amount_shop" value="20">
    <p>Qty:</p>
    <input type="number" class="qty_shop" value="1" name="qnty">
    <button class="add_shop">Add to cart</button>
  </div>

  <form action="<?php echo $truepath ?>" method="POST">
    <input type="disabled" name="qty" id="korzina_qty" class="korzina_input" value="0">
    <input type="number" name="amount" id="amount_shop" value="0">
  </form>

</body>

</html>

