Making Bootstrap Accordion with JQuery

Question

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:

  <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 JavaScript looks like so (in addition 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 .after or .before instead of .append but using .before just caused the div to disappear. Any ideas much appreciated.

Answer 1

https://jsfiddle.net/VixedS/L18fue2y/ Of course I've used some example data in the fiddle.

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

There was a slight mistake in the code. the place where the text was added. just changed the location of the

*.html("test")*

Please check the code below:

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;
}