I'm working on a webpage that pulls in all Active Directory groups that begin with a certain string via JSON and need to add the following html into an existing <div> tag, for each AD Group returned:
<!-- Dynamically added html-->
<div class="card">
<div class="card-header">
<a href="javascript:void(0);" class="card-title" data-toggle="collapse" data-target="#js_demo_accordion-3a" aria-expanded="true">
<i class="fal fa-file-medical-alt width-2 fs-xl"></i>
<h2 id="group1-name-here">
Group1 Name Here
</h2>
<span class="ml-auto">
<span class="collapsed-reveal">
<i class="fal fa-minus fs-xl"></i>
</span>
<span class="collapsed-hidden">
<i class="fal fa-plus fs-xl"></i>
</span>
</span>
</a>
</div>
<div id="js_demo_accordion-3a" class="collapse show" data-parent="#js_demo_accordion-3" style="">
<div class="card-body" id="group1-name-here-card-body">
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>
<div class="card">
<div class="card-header">
<a href="javascript:void(0);" class="card-title" data-toggle="collapse" data-target="#js_demo_accordion-3a" aria-expanded="true">
<i class="fal fa-file-medical-alt width-2 fs-xl"></i>
<h2 id="group2-name-here">
Group2 Name Here
</h2>
<span class="ml-auto">
<span class="collapsed-reveal">
<i class="fal fa-minus fs-xl"></i>
</span>
<span class="collapsed-hidden">
<i class="fal fa-plus fs-xl"></i>
</span>
</span>
</a>
</div>
<div id="js_demo_accordion-3a" class="collapse show" data-parent="#js_demo_accordion-3" style="">
<div class="card-body" id="group2-name-here-card-body">
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>
<!-- End Dynamically added html-->
My question is, how do I initialize the newly added element "id"'s, for example "group1-name-here" "group1-name-here-card-body", so I can address them via jQuery?
For example, I tried updating the Group name and information for the first group as follows:
$("#group1-name-here").text("Actual Group Name");
$("#group1-name-here-card-body").text("Group one's information");
but nothing happens. It seems I need to somehow tell jQuery to initialize the new element "id"'s.
All the examples I find searching online are for adding an event, such as "click" to a dynamic html element, however, I want to load a new HTML section "card" and then update the "h2" text & "card-body" text, with the current groups information, then do the same for next group and so on. No click involved.
Keep in mind I'm fairly new to jQuery, so if you could keep the syntax/code as newby readable as possible, that would be great.
Thanks in advance for taking the time to help. All you contritutors are awesome!