title: Add panels to Bootstrap 3 accordion dynamically
body: <p>I am trying to add Bootstrap 3 panels to an accordion dynamically. My (relevant) code is given below:</p>
  
  <pre><code>&lt;div class="panel-group" id="queues-accordion"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the JS code:</p>
  
  <pre><code>$("#addqueuebutton").on("click",function(){
      var queue = '&lt;div class="panel panel-default"&gt;';
      queue += '&lt;div class="panel-heading"&gt;';
      queue += '&lt;h4 class="panel-title"&gt;';
      queue += '&lt;a data-toggle="collapse" data-parent="queues-accordion" href="collapse1"&gt;' + $('#queuename').val() + '&lt;/a&gt;';
      queue += '&lt;/a&gt;';
      queue += '&lt;/h4&gt;';
      queue += '&lt;/div&gt;';
      queue += '&lt;div id="collapse1" class="panel-collapse collapse in"&gt;';
      queue += '&lt;div class="panel-body"&gt;' + This is a test + '&lt;/div&gt;';
      queue += '&lt;/div&gt;';
      queue += '&lt;/div&gt;';
      $('#queues-accordion').append(queue);
  })
  </code></pre>
  
  <p>I followed this guide - <a href="https://stackoverflow.com/questions/18825975/add-dynamic-closed-panels-in-bootstrap-3-accordion">Add dynamic closed panels in Bootstrap 3 accordion</a>, but I am not getting the panel to appear on the page. Can anyone point out my mistake please?</p>