Forma de inserção no accordion em múltiplos itens com AJAX [Problema atualizado]

[Matheus B. Siqueira 0]

 

Olá, tento fazer uma requisição para atualização de item do accordion no mysql, porém apenas um item é atualizado.

O código funciona da seguinte forma: É buscado perguntas referente ao vídeo selecionado no carousel, logo após, o código da Amostra de Código 1, cria os cards dentro do modal. Cada card é referente a uma pergunta diferente registrada no Banco de Dados.

Porém, ao tentar atualizar um item do MYSQL, dentro do card, no textarea, o primeiro item (1º pergunta) desse accordion é atualizado, o segundo item (2º pergunta) não é atualizado.

Cada pergunta possui um id no MYSQL, bem como, um assunto, uma resposta, uma pergunta... de acordo com a Figura 01.

Vale ressaltar que, de acordo com a Amostra de Código 2, é buscado juntamente com o AJAX, todas as perguntas referente ao vídeo selecionado no carousel.

Amostra de Código 1:

 $(document).ready(function() {
    
      $(function()
            {
                $('#responder_duvidas').click(function() {
                        var codigoVideo2 = $('.carousel-item.active').attr('data-link_video');
                    var accordion2 = "";
     
                    $.post("buscar_duvida_monitor_resp.php", {
                        codigo_video_monitor: codigoVideo2,
                    },
    
                    function(data2, status) {
                        if (data2 !== "Fail") {
    
                            $("#dynamic_accordion #accordion").html(accordion2); // Adiciona essa linha
     
                            $.each(JSON.parse(data2), function (index2, duvida3)
                            {
                                accordion2 += '<div class="card" style="margin: 5px">';
                                accordion2 += '<div class="card-header" id="heading'+index2+'">';
                                accordion2 += '<h5 class="mb-0">';
                                accordion2 += '<button class="btn btn-link" data-toggle="collapse" data-target="#collapse'+index2+'" aria-expanded="true" aria-controls="collapse'+index2+'">';
                                accordion2 += duvida3.assunto;
                                accordion2 += '</button>';
                                accordion2 += '</h5>';
                                accordion2 += '</div>';
             
                                accordion2 += '<div id="collapse'+index2+'" class="collapse" aria-labelledby="heading'+index2+'" data-parent="#accordion">';
                                accordion2 += '<div class="card-body">';
                                accordion2 += '<div style="background: #ddd; color #fff; padding: 10px 20px; border-radius: 5px">';
                                accordion2 += duvida3.pergunta;
                                accordion2 += '</div>';
             
                                accordion2 += '<hr>';
             
                                accordion2 += '<div style="background: #fff; color #fff; padding: 10px 20px; border-radius: 5px">';
                                accordion2 += '<form method="post" enctype="multipart/form-data">';
                                accordion2 += '<textarea class="form-control" name="resposta" id="resposta" required>'+duvida3.resposta+'</textarea>';
                                accordion2 += '<input type="hidden" id="id_duvidas" value="'+duvida3.idduvidas+'" />';
                                accordion2 += '<br><button type="button" id="enviar_resposta" class="btn btn-success btn-sm">Enviar resposta</button>';
                                accordion2 += '</form>';
                                accordion2 += '</div>';
                                accordion2 += '</div>';
                                accordion2 += '</div>';
                                accordion2 += '</div>';
             
                                $("#dynamic_accordion #accordion").html(accordion2);
                            });
                        }
                    });
                });
    
                $(document).on("click", "#enviar_resposta",function(){
                    $.ajax({
                        url: "atualizar_resposta.php",
                        method: "POST",
                        data: {
                            resposta: $('#resposta').val(),
                            idduvidas: $('#id_duvidas').val()
                        },
                        success: function(res) {
                            var data = JSON.parse(res);
                            alert((data.success == true) ? "Pergunta atualizada" : "Pergunta não atualizada");
                  $('.modal-backdrop').remove();
                            return;
                        }
                    });
    
                    // fecha modal
                    $("#modalDuvidas").modal("hide");
                });
            });
});

Figura 1:

 

 

Amostra de Código 2:

  <?php

if (isset($_POST['idduvidas']) && isset($_POST['resposta'])) {
    $id_resposta = $_POST['idduvidas'];
    $resposta = $_POST['resposta'];
 
    $servidor = 'localhost';
    $usuario = 'root';
    $senha = 'root';
    $banco = 'onteach';
 
    $conexao = mysqli_connect($servidor,$usuario,$senha,$banco);
    $consulta2 = "UPDATE duvidas SET duvidas.resposta = '$resposta' WHERE duvidas.idduvidas = '$id_resposta'";
 
    die(json_encode(['success'=>(mysqli_query($conexao, $consulta2))]));
}

Figura 2 (FIGURA COMPLEMENTAR APRESENTANDO O ACCORDION NO WEBSITE)

 

Por fim, este tópico auxilia em um tema que é específico, porém, pode ser utilizado para outros fins de programação, bem como, a utilização de definição de váriantes em accordion com maiores itens.

Desde já, agradeço.

 

[Matheus B. Siqueira 0]

DESCOBRI O PROBLEMA, PORÉM NÃO SEI COMO RESOLVER!

 

Cada card do accordion, possui um index, o primeiro é 0, o segundo é 1, assim sucessivamente.

No botão que criei para alterar o comentário está assim:

 

'<br><button type="button" id="enviar_resposta" class="btn btn-success btn-sm">Enviar resposta</button>';

 

Porém deve estar assim:

 

'<br><button type="button" id="enviar_resposta'+index2+'" class="btn btn-success btn-sm">Enviar resposta</button>';

 

O único problema é no JQUERY.

 

Não faço ideia de como fazer com que o: 

$(document).on("click", "#enviar_resposta",function(){

Consiga identificar qual botão do card que estou selecionando..