JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="main">
    <button aria-expanded="false" data-target="#collapsible_obj_0" data-toggle="collapse" class="btn btn-link collapsed">click here</button>

    <div style="height: 0px;" aria-expanded="false" id="collapsible_obj_0" class="collapse">
        <span>foo</span>
    </div>
</div>

JavaScript

$( document ).ready(function() {
for (i = 1; i < 5; i++) { 
    console.log('loop: ' + i);
    var objectContainer =  $("#main");
    var header = objectContainer.clone(true);
    console.log(header);
    var counter = i;
    var collapseId = "collapsible_obj_" + counter;
    
    var res = header.find(".collapse").attr("id", collapseId);
    console.log(res);
    var res2 = header.find("button[data-toggle='collapse']").attr("data-target", "#"+collapseId);
    
    $(header).appendTo('body');
    
    console.log(res2);
}
});