Sistema de perguntas com Ajax

jQuery

HTML

PHP

Ajax

16/09/2022

Boa tarde, estou tentando desenvolver um sistema de questões com Jquery Ajax. Deu tudo certinho, utilizando POST (pois vou colocar pelo PHP). No entanto, ele só funciona no primeiro formulário.
A página inicial retorna as questões do banco de dados por um loop while com PHP, quando eu clico em responder ele troca o parágrafo que está abaixo do botão submit para a resposta que o usuário botou, porém só funciona com a primeira questão, o resto quando clico em responder a pagina atualiza e nada acontece. Se alguém puder me ajudar, preciso muito disso.

index.php
<?php
    // INCLUI A CONFIGURAÇÃO DO PAGAMENTO
    include("php/connect.php");
?>
<!doctype html>
<html lang="pt-BR">
    <head>
        <!-- required meta tags -->
        <meta charset="utf-8">
        <title>Pagamento</title>
    </head>

    <body>

    <?php

        // LOOP COM As PERGUNTAS 
        $query = $conn->prepare("SELECT * FROM questoes");
        $query->execute();

        while($row = $query->fetch(PDO::FETCH_ASSOC)){
    ?>
    <form action="" method="POST" id="questao">
        <p><?php echo $row[''''pergunta'''']; ?></p>

        <br>
        <input type="hidden" id=''''id'''' value="<?php echo $row[''''id'''']; ?>">
        <input type="radio" name="opcao" id="opcao" value="a"/><?php echo $row[''''opcao_a'''']; ?><br>
        <input type="radio" name="opcao" id="opcao" value="b"/> <?php echo $row[''''opcao_b'''']; ?><br>
        <input type="radio" name="opcao" id="opcao" value="c"/><?php echo $row[''''opcao_c'''']; ?><br>
        <input type="radio" name="opcao" id="opcao" value="d"/><?php echo $row[''''opcao_d'''']; ?><br>
        <input type="radio" name="opcao" id="opcao" value="e"/><?php echo $row[''''opcao_e'''']; ?><br>
        <br><br>

        <input type="submit" id="submit" value="responder"> <p id="resposta_user">aaa</p>
    </form>

    <?php } ?>

    <!-- JQUERY -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
    $(document).ready(function(){
        $("#submit").click(function(event){
            event.preventDefault();
            var opcao = $("input[name=''''opcao'''']:checked").val();
            var id = $("#id").val();

            $.ajax({
                url: ''''php/responder.php'''',
                method: ''''POST'''',
                data: {opcao: opcao, id: id}
            }).fail(function(){
                alert(''''erro'''');
            }).done(function(result){
                var id = $("#resposta_user").html(result);
            });
        });
    });
    </script>
    
    </body>
</html>


responder.php
<?php
    $id = $_POST[''''id''''];
    $resposta = $_POST[''''opcao''''];
    
    echo "ID DA QUESTÃO " . $id;
    echo "RESPOSTA DO USUÁRIO " . $resposta;
?>
João Lucas

João Lucas

Curtidas 0
POSTAR