При нажатии на любую из кнопок созданных через цикл, в переменные объявляемые в js всегда передаёт значения только первой из кнопок

Question

<div class="box-container">
    <?php
    $sql1 = "SELECT * FROM coffee ORDER BY id ASC";
    
        if($result = $conn->query($sql1))
        {
            foreach($result as $row)
            {
                ?>
                    <div class="box" >
                            <img src="<?php echo $row["LinkToThePicture"]; ?>" alt="">
                            <h3><?php echo $row["Name"]; ?></h3>
                            <div class="price"><?php echo $row["Price"];?>₽</div>
                            <input type="submit" id="add-btn" name="add_to_cart" class="btn qwe" value="Добавить в карзину"/>
                            <input type="hidden" class="id" name="id" value="<?php echo $row["id"];?>"/>
                            <input type="hidden" class="linkToThePicture" name="linkToThePicture" value="<?php echo $row["LinkToThePicture"];?>"/>
                            <input type="hidden" class="name" name="name" value="<?php echo $row["Name"];?>"/>
                            <input type="hidden" class="price" name="price" value="<?php echo $row["Price"];?>"/>
                            <input type="hidden" class="quantity" name="quantity" value="1"/>
                    </div>
                <?php
            }
        }
    ?>
<script>
$(document).ready(function(){
    $('.qwe').on('click', function(){
    var id = ('input.id').val();
    var linkToThePicture = ('input.linkToThePicture').val();
    var name = ('input.name').val();
    var price = ('input.price').val();
    var quantity = ('input.quantity').val();
    console.log(id, linkToThePicture, name, price, quantity)
        $.ajax({
        method: "POST",
        url: "CreatingShoppingCart.php",
        data: { id: id, linkToThePicture: linkToThePicture, name: name, price: price, quantity: quantity }
        })
        
        .done(function(msg) {
        alert( "Data Saved: " + msg );
        });
    })
});

</script>

Answer 1

При написании selector'а в виде ('input.id').val() вы выбираете первый элемент из DOM-дерева, который удовлетворяет поиску. Для того, чтобы получить значение id нужного input'а, вам необходимо осуществить более точный поиск, например, вот так:

$(document).ready(function() {
  $('.qwe').on('click', function() {
    var id = $(this).closest('.box').find('input.id').val(); //метод closest() найдёт ближайшего родителя с классом .box, а метод find() будет искать в этом родителе элемент с классом .id
    console.log(id);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <input class="qwe" value="Submit" type="submit">
  <input class="id" value="Раз">
</div>
<div class="box">
  <input class="qwe" value="Submit" type="submit">
  <input class="id" value="Два">
</div>

А всё остальное по аналогии должно быть понятно.

БЛОГ НА HUSL

При нажатии на любую из кнопок созданных через цикл, в переменные объявляемые в js всегда передаёт значения только первой из кнопок

Ответы (1 шт):