Creating a Bootstrap Accordion with jQuery

Question

I am trying to create a Bootstrap accordion structure using jQuery (with data from the API). I have almost the entire structure, but it’s difficult for me to add an extra div for the internal content that continues to be placed inside my anchor tag. I would like to make HTML that looks like this:

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-   
      parent="#accordion2" href="#collapseTwo">
       Collapsible Group Item #2
     </a>
   </div>
   <div id="collapseTwo" class="accordion-body collapse">
     <div class="accordion-inner">
   </div>
   </div>
  </div>

My JavaScriptlooks like this (besides, I have a global counter):

function makeAccordion(reposDatum) {
  var outerGroup = $("<div>").addClass("accordion-group");  
  var outerHeading = $("<div>").addClass("accordion-heading");
  var makeId =  "#collapse" + counter;
  var mainTitle = $("<a>").append(reposDatum.name);
  $(mainTitle).addClass("accordion-toggle").attr("data-toggle",   
   "collapse").attr("data-parent", "#accordion2").attr("href", makeId);
  var innerGroupShell = $("<div>").attr("id",  
    makeId).addClass("accordion-body").addClass("collapse").html("test");
  var innerGroupInner = $("<div>").addClass("accordion-inner");

  innerGroupShell.append(innerGroupInner);  
  mainTitle.append(innerGroupShell);
  outerHeading.append(mainTitle);
  outerGroup.append(outerHeading);

  return outerGroup;
}

I suspect that I need to use .afteror .beforeinstead .append, but using .beforejust made the div disappear. Any ideas are greatly appreciated.

Answer 1

https://jsfiddle.net/VixedS/L18fue2y/ , .

function makeAccordion(reposDatum){
    counter++;
    $('.accordion-group').append(''+
      '<div class="accordion-heading">'+
      '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion'+(counter-1)+'" href="#collapse'+counter+'">'+
          reposDatum.name+
      '</a>'+
      '</div>'+
      '<div id="collapse'+counter+'" class="accordion-body collapse">'+
          '<div class="accordion-inner"></div>'+
      '</div>');
}

Answer 2

. , .

*.html("test")*

, :

function makeAccordion(reposDatum) {
  var outerGroup = $("<div>").addClass("accordion-group");  
  var outerHeading = $("<div>").addClass("accordion-heading");
  var makeId =  "#collapse" + counter;
  var mainTitle = $("<a>").append(reposDatum.name);
  $(mainTitle).addClass("accordion-toggle").attr("data-toggle",   
   "collapse").attr("data-parent", "#accordion2").attr("href", makeId);
  var innerGroupShell = $("<div>").attr("id",  
    makeId).addClass("accordion-body").addClass("collapse");
  var innerGroupInner = $("<div>").addClass("accordion-inner").html("test");

  innerGroupShell.append(innerGroupInner);  
  mainTitle.append(innerGroupShell);
  outerHeading.append(mainTitle);
  outerGroup.append(outerHeading);

  return outerGroup;
}