Form of insertion into accordion in multiple items with AJAX

Question

Hi, I’m trying to make a requisition for updating item of accordion in the mysql, but only one item is updated.

The code works as follows: Sample of Code 1, creates the cards within the modal. Each card refers to a different question recorded in the Database.

However, when trying to update an MYSQL, inside the card, on textarea, the first item (1st question) of this accordion is updated, the second item (2nd question) is not updated.

Each question has an id in MYSQL, as well as, a subject, an answer, a question... according to Figure 01.

It is worth noting that, according to the Sample of Code 2, is searched together with AJAX, all questions regarding the video selected in Carousel.

Sample of Code 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");
    });
  });
});

Figure 1:

Sample of Code 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))]));
}

Figure 2 (COMPLEMENTARY FIGURE PRESENTING THE ACCORDION ON THE WEBSITE)

Finally, this topic assists in a theme that is specific, however, can be used for other programming purposes as well, the use of variable definition in accordion with larger items.

From now on, thank you.