how to add hierarchical html elements through Jque

问题:

There is bootstrap Accordian in my html page:link

Now,there is a button in html(appearing more than once on the same page),on the click of which,a bootstrap-modal is opened containing an accordian.

The problem is,the labels are not fixed in that accordian,it can have different number of labels depending on which button it is opened from.

So,I have to add the accordian-labels dynamically through JavaScript,particularly this code:

<div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

I know there is a .add() function in Jquery,but here,I want to add many divs heirarchially and would become cumbersome if I add it(please refer link) with this method.

Please suggest some optimized way for dynamic addition of more than 1 elements in html through JavaScript.

Thanks.