title: Dynamic add new panel to bootstrap accordion
body: <p>I write a function to dynamic add new panel to bootstrap accordion
  and it work</p>
  
  <p>My problem is the panel body show inverted 
  See the image below
  <a href="https://i.stack.imgur.com/BjiWi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BjiWi.png" alt="enter image description here"></a></p>
  
  <p>And when i try the same code in jsfiddle it work fine 
  <a href="https://jsfiddle.net/Eadhassan/aqpbzcex/1/" rel="nofollow noreferrer">https://jsfiddle.net/Eadhassan/aqpbzcex/1/</a></p>
  
  <p>This is my HTML code :</p>
  
  <pre><code>&lt;button class="btn btn-default btn-block addPanel" type="button"&gt;Add panel&lt;/button&gt;
  &lt;div class="panel-group panels" id="accordion" role="tablist" aria-multiselectable="false"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is my jQuery code :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $('.addPanel').click(function() {
          var x = $('.panels .panel').length+1;
          var template = '&lt;div class="panel panel-primary"&gt;';
          template += '&lt;div class="panel-heading" role="tab"&gt;';
          template += '&lt;h4 class="panel-title"&gt;';
          template += '&lt;a data-toggle="collapse" href="#' + x + '" aria-expanded="false" aria-controls="collapseOne"&gt;Panel ' + x + '&lt;/a&gt;';
          template += '&lt;a id="removeSlide" style="cursor: pointer" class="pull-right" data-toggle="tooltip" data-placement="top" title="Delete this"&gt;&lt;i class="fa fa-lg fa-trash"&gt;&lt;/i&gt;&lt;/a&gt;';
          template += '&lt;/h4&gt;&lt;/div&gt;';
          template += '&lt;div id="' + x + '" class="panel-collapse collapse" role="tabpanel"&gt;&lt;div class="panel-body"&gt;';
  
          // Title
          template += '&lt;div class="form-group"&gt;';
          template += '&lt;div class="row"&gt;';
          template += '&lt;label class="form-label col-md-5" for="slideTitle"&gt;title&lt;/label&gt;';
          template += '&lt;div class="col-md-7"&gt;';
          template += '&lt;input type="text" name="sliderSource[' + x + '][slideTitle]" id="slideTitle" class="form-control"&gt;';
          template += '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
          // Description
          template += '&lt;div class="form-group"&gt;';
          template += '&lt;div class="row"&gt;';
          template += '&lt;label class="form-label col-md-5" for="slideTitle"&gt;Description&lt;/label&gt;';
          template += '&lt;div class="col-md-7"&gt;';
          template += '&lt;textarea name="sliderSource[' + x + '][slideTitle]" id="slideTitle" class="form-control"&gt;&lt;/textarea&gt;';
          template += '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
          // Close open tags
          template += '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
          $('.panels').append( template );
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any body had this problem before</p>