title: Making Bootstrap Accordion with JQuery
body: <p>I am attempting to make a Bootstrap accordion structure using JQuery (with data from an API). I nearly have the whole structure but am having a hard time adding an extra div for the inner content, which keeps getting placed inside of my anchor tag. I would like to make HTML that looks like the following: </p>
  
  <pre><code>  &lt;div class="accordion-group"&gt;
      &lt;div class="accordion-heading"&gt;
        &lt;a class="accordion-toggle" data-toggle="collapse" data-   
        parent="#accordion2" href="#collapseTwo"&gt;
         Collapsible Group Item #2
       &lt;/a&gt;
     &lt;/div&gt;
     &lt;div id="collapseTwo" class="accordion-body collapse"&gt;
       &lt;div class="accordion-inner"&gt;
     &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My <code>JavaScript</code> looks like so (in addition I have a global counter):</p>
  
  <pre><code>function makeAccordion(reposDatum) {
    var outerGroup = $("&lt;div&gt;").addClass("accordion-group");  
    var outerHeading = $("&lt;div&gt;").addClass("accordion-heading");
    var makeId =  "#collapse" + counter;
    var mainTitle = $("&lt;a&gt;").append(reposDatum.name);
    $(mainTitle).addClass("accordion-toggle").attr("data-toggle",   
     "collapse").attr("data-parent", "#accordion2").attr("href", makeId);
    var innerGroupShell = $("&lt;div&gt;").attr("id",  
      makeId).addClass("accordion-body").addClass("collapse").html("test");
    var innerGroupInner = $("&lt;div&gt;").addClass("accordion-inner");
  
    innerGroupShell.append(innerGroupInner);  
    mainTitle.append(innerGroupShell);
    outerHeading.append(mainTitle);
    outerGroup.append(outerHeading);
  
    return outerGroup;
  }
  </code></pre>
  
  <p>I suspect that I need to use <code>.after</code> or <code>.before</code> instead of <code>.append</code> but using <code>.before</code> just caused the div to disappear. Any ideas much appreciated.</p>