Automate Collapse with BD

Question

I’m making a system to automate Collapse with my mysql.

I have a table listed below:

This Collapse system, works inside a modal window, where I tried to make each question appear in a Collapse. For this I performed the following system in jquery:

  $(document).ready(function() {

$('#minhas_duvidas').click(function() {
  var codigoVideo = $("#conteudo").val();
  var nomecomp = $("#nomecomp").val();

      $.post("buscar_duvida.php",
  {
    codigo_video: codigoVideo, nome_comp: nomecomp,
  },

  function(data, status){

    if(status == "success"){
    let itens       = '';
    let indicadores = '';

    if (duvidas.length > 0) {

            videos_pendentes.forEach(function(video, indice) {
            indicadores += 'div class="card"';

            itens += '<div class="card-header" id="headingOne">';
            itens += '<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">'+ assunto +'</button>   ' 
            itens += '</div>';

            itens += '<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">';
            itens += '<div class="card-body">' + pergunta;
            itens += '</div>';

        });
          $('#accordion').show();
      } else {

           alert('Nenhum vídeo pendente');
      }
     }
 });
 $('.collapse').collapse();
  });

First, it looks for all the doubts that have the id of the select "content", that is where there is in the BD link_video_selected, it is the value of the select that needs to search;

Soon after I made a Function to display all the questions that were shown in the database;

But this system does not work and I can not find the reason. My modal is below:

          <div class="modal fade" id="modalQuestoes" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Suas questões</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

            <div id="accordion">
              <div class="card">
                <div class="card-header" id="headingOne">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Collapsible Group Item #1</button>   
                </div>
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                  <div class="card-body">
                    Anim parie VHS.
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Voltar</button>
            </div>
            </form>
          </div>
        </div>
      </div>

Can someone help me make the system work?

Answer 1

Hello, Matheus!

found the line below strange, in your JS code. Make sure to adjust the opening and closing of the tag div, your code works normally.

indicadores += 'div class="card"'; // Deveria ser: indicadores += '<div class="card">';