prelevare elementi da foreach php con js

[tauni]

Ciao a tutti, sto lavorando ad un sito web per un esame e sono bloccata a causa di un problema: in una pagina php ho un foreach che mi permette di visualizzare tutti gli elementi prelevati dal db, ogni prodotto ha la possibilità di essere inserito nel carrello tramite apposito button che dovrebbe prelevare tramite js i valori da passare alla funziona che gestisce il tutto. Ora, il problema è che i prodotti appaiono correttamente ma nel momento in cui cerco di aggiungerli nel carrello viene selezionato solo il primo elemento dato dal foreach. Come posso risolvere?

Lascio di seguido la parte di codice in php:

<divclass="row">
<?php foreach($elencolibri as $libro){ ?>

<div class="col-md-3">
<!-- card -->
<div class="card border-primary mb-3">
<div class="card-header"><h5id="titolo"><?= $libro['titolo']; ?></h5></div>
<div class="card-body">
<p><img class="card-img"id="immagine" src="../img/cover/<?= $libro['titolo'];?>.jpg" alt=""></p>
<!-- opzioni disponibili solo al cliente-->
<?php if($_SESSION['seller'] === 'no'){?>
<spanid="prezzo"><?= $libro['prezzo']; ?>€ </span>
<input type="number"id="qnt">
<input type="hidden"id="user_id" value="<?= $_SESSION['user_id'];?>"/>
<input type="text"id="book_id" value="<?= $libro['id_libro']; ?>"/>
<a type="button"class="add-cart">
<i class="fa-solidfa-cart-shopping"></i>
</a>
<a type="button"class="add-fav">
<i class="fa-solidfa-heart"></i>
</a>
<?php } ?>

<p><a id="dettagli"class="btn btn-warning"href="./scheda_libro.php<?='?id='.$libro['id_libro']; ?>"role="button"> Dettagli </a></p>

</div> <!-- fine card body -->
</div> <!-- fine card header -->
</div> <!-- fine card -->

<?php } ?>
</div> <!-- fine col-md-3 -->
</div> <!-- fine row -->


e anche il js:



$(".add-cart").click(function(event){
event.preventDefault();
console.log('dentro add cart');
var prod_qnt =$("#qnt").val();
var prod_id =$("#book_id").attr('value');
var user_id =$("#user_id").val();
console.log(prod_qnt);
console.log(prod_id);
console.log(user_id);
$.ajax({
url:"function_cart_fav.php",
dataType: 'text',
method: 'POST',
data:{
cart:1,
prod_id:prod_id,
prod_qnt:prod_qnt,
user_id:user_id
},
success: function(response){
if(response.indexOf('success') > 0){
$("#success_cart").html('Prodotto aggiunto al carrello.');
/* var delay =2000;
setTimeout(location.reload(), delay); */
}else{
$("#alert_cart").html(response);
}
}
});
});

[filippo.toso]

Prova una cosa così:

<div class="row">
    <?php foreach ($elencolibri as $libro) : ?>
 
        <div class="col-md-3">
            <!-- card -->
            <div class="card border-primary mb-3">
                <div class="card-header">
                    <h5id="titolo"><?= $libro['titolo']; ?></h5>
                </div>
                <div class="card-body">
                    <p><img class="card-img" id="immagine" src="../img/cover/<?= $libro['titolo']; ?>.jpg" alt=""></p>
                    <!-- opzioni disponibili solo al cliente-->
                    <?php if ($_SESSION['seller'] === 'no') : ?>
                        <span id="prezzo"><?= $libro['prezzo']; ?>€ </span>
                        <input type="number" id="qnt-<?= $libro['id_libro']; ?>">
                        <a type="button" class="add-cart" data-id="<?= $libro['id_libro']; ?>">
                            <i class="fa-solid fa-cart-shopping"></i>
                        </a>
                        <a type="button" class="add-fav">
                            <i class="fa-solid fa-heart"></i>
                        </a>
                    <?php endif; ?>
 
                    <p><a id="dettagli" class="btn btn-warning" href="./scheda_libro.php?id=<?= $libro['id_libro']; ?>" role="button"> Dettagli </a></p>
 
                </div> <!-- fine card body -->
            </div> <!-- fine card -->
        </div> <!-- fine col-md-3 -->
 
    <?php endforeach; ?>
</div> <!-- fine row -->
 
<script>
    $(".add-cart").click(function(event) {
        event.preventDefault();
        var productId = $(this).data('id');
        var prod_qnt = $('#qnt-' + productId).val();
        console.log(prod_qnt);
        console.log(prod_id);
        $.ajax({
            url: "function_cart_fav.php",
            dataType: 'text',
            method: 'POST',
            data: {
                cart: 1,
                prod_id: prod_id,
                prod_qnt: prod_qnt,
                // user_id: user_id // Inutile, lo hai già in sessione
            },
            success: function(response) {
                if (response.indexOf('success') > 0) {
                    $("#success_cart").html('Prodotto aggiunto al carrello.');
                } else {
                    $("#alert_cart").html(response);
                }
            }
        });
    });
</script>

L'id degli elementi html DEVE essere univoco a livello di pagiona.