title: PHP MySQL table data to accordion
body: <p>I have a page where i want it to display the data of a database table in accordion's while having some buttons to edit the data displayed on the accordion. Initially i tried to display the accordions but when clicking on them only the 1st accordion collapses. </p>
  
  <p>Here's the code i currently have:</p>
  
  <pre><code>&lt;?php
  
      $sql = "SELECT nopId, studentname, studentcourse FROM nopforms";
      $result = $con-&gt;query($sql);
  
      if ($result-&gt;num_rows &gt; 0) {
      // output data of each row
          while($row = $result-&gt;fetch_assoc()) {
              $studentname = $row["studentname"];
              $studentcourse = $row["studentcourse"];
              echo "&lt;div class='pnel-group' id='accordion'&gt;
                      &lt;div class='panel panel-default'&gt;
                      &lt;div class='panel-heading'&gt;
                      &lt;h4 class='panel-title'&gt;
                      &lt;a data-toggle='collapse' data-parent='#accordion' href='#collapse1'&gt;".$studentname."&lt;/a&gt;
                          &lt;/h4&gt;
                          &lt;/div&gt;
                           &lt;div id='collapse1' class='panel-collapse collapse'&gt;
                              &lt;div class='panel-body'&gt;".$studentcourse."&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
              ";
              }
      } else {
      echo "You have not submitted any logs!";
      }
  
  
  
  
      ?&gt;
  </code></pre>
  
  <p>Html code:</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
              &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
              &lt;h4 class="panel-title"&gt;
              &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse1"&gt;&lt;?php echo $row["studentname"]; ?&gt;&lt;/a&gt;
              &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapse1" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/div&gt;
              &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for your time.</p>