How to get the value of the second Javascript button

Question

I am adjusting a photo selling system, to add the photos in the cart by JS. The script works 100%, only with PHP, but I want to do without leaving the page, using JS.

I have the following situation:

Each photo has 3 size options: P, M, G. With JS, it always adds the first option, does not take the value="< ? php echo $preco_digital['id']; ? >" size/form/next button.

How do I make the JS go to the next record when I click the specific button?

Form (1 for each size):

<form style="padding: 0" method="POST" id="add-carrinho" action="carrinho-add.php">
    <input type="hidden" name="id_foto" id="id_foto" value="<?php echo $r['id']; ?>" />
    <input type="hidden" name="id_evento" id="id_evento" value="<?php echo $r['id_evento']; ?>" />
    <input type="hidden" name="id_preco" id="id_preco" value="<?php echo $preco_digital['id']; ?>" />
    <input type="hidden" name="id_promo" id="id_promo" value="<?php echo $promocao['id']; ?>" />
    <button id="add-carrinho" class="compra-foto" type="submit" role="button">
        <span><?php echo $preco_credito; ?> Créditos</span>
        <div class="icon">
            <i class="fa fa-shopping-cart"></i>
            <i class="fa fa-check"></i>
        </div>
    </button>
</form>

Javascript:

$(function(){
    // Executa assim que o botão de salvar for clicado
    $('.compra-foto').click(function(e){

        // Cancela o envio do formulário
        e.preventDefault();

        // Pega os valores dos inputs e coloca nas variáveis
        var id_foto = $('#id_foto').val();
        var id_evento = $('#id_evento').val();
        var id_preco = $('#id_preco').val();
        var id_promo = $('#id_promo').val();

        // Método post do Jquery
        $.post('carrinho-add.php', {
            id_foto:id_foto,
            id_evento:id_evento,
            id_preco:id_preco,
            id_promo:id_promo
        }, function(resposta){
            // Valida a resposta
            if(resposta == 1){
                // Limpa os inputs
                $('input, textarea').val('');
            }
        });

    });
}); 

Answer 1

Vinicius, when you click on any of the submit buttons, jquery takes the data from the first form, you’re not telling it the inputs from which form you want it to take. you can solve it by doing it.

Make the following changes:

Change the type of "Submit" for "Button" on your buttons of all the forms

being like this

<button id="add-carrinho" class="compra-foto" type="button" role="button">

And your javascript update to look like this.

$(function(){
    // Executa assim que o botão de salvar for clicado
    $('.compra-foto').click(function(){

        // Pega os valores dos inputs e coloca nas variáveis
    var id_foto = $(this).closest("form").find("input[name='id_foto']").val();
    var id_evento = $(this).closest("form").find("input[name='id_evento']").val();
    var id_preco = $(this).closest("form").find("input[name='id_preco']").val();
    var id_promo = $(this).closest("form").find("input[name='id_promo']").val();

        // Método post do Jquery
        $.post('carrinho-add.php', {
            id_foto:id_foto,
            id_evento:id_evento,
            id_preco:id_preco,
            id_promo:id_promo
        }, function(resposta){
            // Valida a resposta
            if(resposta == 1){
                // Limpa os inputs
                $('input, textarea').val('');
            }
        });

    });
}); 

I hope I helped. If it works please mark next to the answer as correct, would be grateful :)