title: Fetching data from MySQL database to accordion
body: <p>Fetching data from MySQL database to html accordion</p>
  
  <p>I'm fetching episodes from database and want to put it in Accordion..
  so i tried and fetch successfully data but facing problem to putting in accordion.</p>
  
  <p>after fetching... all episodes get loaded in "Season 1".. not accordingly Seasons...</p>
  
  <p><a href="https://i.stack.imgur.com/72DGl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/72DGl.jpg" alt="demo"></a></p>
  
  <p>fetch.php</p>
  
  <pre><code>&lt;?php
  $connect = mysqli_connect("localhost", "root", "", "baba");
  $output = '';
  
  $query = "
  SELECT * FROM `episodes` WHERE `title_id` = '9851'
  ";
  
  $result = mysqli_query($connect, $query);
  if(mysqli_num_rows($result) &gt; 0)
  {
   $output .= '
  
   ';
  
  while($row = mysqli_fetch_array($result))
  {
     $output .= '
    &lt;!-- video episode item --&gt;
    &lt;div class="related-video-item"&gt;
        &lt;div class="thumb"&gt;
  
            &lt;a href="#"&gt;&lt;img src="'.$row["poster"].'" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;a href="#" class="title"&gt;'.$row["title"].'&lt;/a&gt;
        &lt;a class="channel-name" href="#"&gt;Episode '.$row["episode_number"].'&lt;span&gt;
                &lt;i class="fa fa-check-circle"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- // video episode item --&gt;
    ';
  
   }
   echo $output;
  }
  else
  {
   echo 'Not Found';
  }
  ?&gt;
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
      &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="#S1"&gt;Season 1&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="S1" class="panel-collapse collapse in"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;div id="result"&gt;
                          &lt;div class="row"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&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="#S2"&gt;Season 2&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="S2" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&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="#S3"&gt;Season 3&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="S3" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
  
          $(document).ready(function () {
  
              load_data();
  
              function load_data(epi) {
                  $.ajax({
                      url: "fetch.php",
                      method: "POST",
                      data: { query: epi },
                      success: function (data) {
                          $('#result').html(data);
                      }
                  });
              }
          });
  
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>