There is a small website where you need to make an opportunity to buy goods, the amount of goods is very small, so I don’t see the point of loading into the database, I wanted to go the other way as a stationary form on the website.

There are 3 identical blocks with the goods (only the price and the picture change):

<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>

And there is a basic form, where the amount and amount will be summed up:

 <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 which summarizes all the digits in the first form and adds to the main one:

 $(".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); })

But all this will not work on all blocks, but only on the first one. How can you implement to work at all?

    2 answers 2

    Like that

     <!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>

      The easiest way is to give different id forms of goods and take in javascript by id .

      It is possible to play with this->parent->нужныйЭлемент .