title: Accordion Buttons Not Closing (Panel) after Minor Change
body: <p>Using JavaScript. So, I have set this up in two ways. One way everything works perfectly and the other will not, despite the fact that I can see no difference between them.</p>
  
  <p>I'm displaying tables after user selection on a map. Each new selection populates a new accordion button that should be opened and closed. The tables are set up after an Ajax call to GeoServer so all of this must be dynamic (like the solution that works but the button's do not close). There is a count attached to it so that new panels/table containers/tables are created each time.</p>
  
  <p>Scenario 1) I hard coded the html in which works fine. Like this:</p>
  
  <pre><code>    &lt;div class="container" id="accordionContainer"&gt;      
          &lt;button class="accordion"&gt;Selection 1&lt;/button&gt;
              &lt;div class="panel" id="panel1"&gt;
                  &lt;div class="container" id="tableContainer"&gt;
                       &lt;table id="featureTable" class="display" width="100%"&gt;
                          &lt;thead&gt;&lt;/thead&gt;&lt;tfoot&gt;&lt;/tfoot&gt;
                       &lt;/table&gt;
                &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I set up 6 or 7 of those in the body section (head section works as well) and hard coded the count number (like panel1 above). Works great. User selects a map area and the features are displayed in an accordion button. I can't have hard coded anything though. There needs to be no limit on how many selections/tables.</p>
  
  <p>Which brings me to:</p>
  
  <p>Scenario 2) Everything is set up dynamically after each Ajax request. This works, but the buttons do not close. They are open and display all the tables. </p>
  
  <pre><code>    var btnPart = '&lt;button class="accordion"&gt;' + 'Selection ' + tableCount.toString() + ' ' + activeOverlay+ '&lt;/button&gt;';
      var panelPart = '&lt;div class="panel" id="panel' + panelCount.toString() + '"&gt;';          
      var tabContPart = '&lt;div class="container" id="tableContainer' + tableContainerCount.toString() +'"&gt;';
      var tablePart = '&lt;table id="featureTable' + tableCount.toString() +  '" class="display" width="100%"&gt;&lt;thead&gt;&lt;/thead&gt;&lt;tfoot&gt;&lt;/tfoot&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
          $('#accordionContainer').append(btnPart, panelPart, tabContPart, tablePart);
                           var newTable = '#featureTable' + tableCount.toString();
                                  $(newTable).DataTable( {
                                      data: data.features,   //get the data under features
                                      columns: columns,
                                     destroy: true
                                  } );  
  </code></pre>
  
  <p>I cannot see a difference between hard coding the DOM ahead of time or setting it up on the fly that would cause the buttons to lose their open/close functionality.</p>
  
  <p>UPDATED CODE AS REQUESTED:</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;div id="sidebar"&gt;&lt;/div&gt;
      &lt;div class="container" id="accordionContainer"&gt;&lt;/div&gt;   
  &lt;/body&gt;  
  
  &lt;script&gt;
      var acc = document.getElementsByClassName("accordion");
                  var i;
                  for (i = 0; i &lt; acc.length; i++) {
                      acc[i].onclick = function(){
                          /* Toggle between adding and removing the "active" class,
                          to highlight the button that controls the panel */
                          this.classList.toggle("active");
  
                          /* Toggle between hiding and showing the active panel */
                          var panel = this.nextElementSibling;
                          if (panel.style.display === "block") {
                              panel.style.display = "none";
                          } else {
                              panel.style.display = "block";
                          }
                      }
  }
          var btnPart = '&lt;button class="accordion"&gt;' + 'Selection ' + tableCount.toString() + ' ' + activeOverlay+ '&lt;/button&gt;';
          var panelPart = '&lt;div class="panel" id="panel' + panelCount.toString() + '"&gt;';          
          var tabContPart = '&lt;div class="container" id="tableContainer' + tableContainerCount.toString() +'"&gt;';
          var tablePart = '&lt;table id="featureTable' + tableCount.toString() +  '" class="display" width="100%"&gt;&lt;thead&gt;&lt;/thead&gt;                        &lt;tfoot&gt;&lt;/tfoot&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
              $('#accordionContainer').append(btnPart, panelPart, tabContPart, tablePart);
                               var newTable = '#featureTable' + tableCount.toString();
                                      $(newTable).DataTable( {
                                          data: data.features,   //get the data under features
                                          columns: columns,
                                         destroy: true
                                      } ); 
  &lt;/script&gt;     
  </code></pre>