JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="obj">
<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>
<input type="submit" value="add new link" id="new" />
<div id="final">
Final Destination
</div>

CSS

#final {
  margin:100px 0;
  border:1px solid red;
}

JavaScript

var addButton = (function () {
	var counter = 0;
  
  return function() {
    var objectContainer = $('#obj');
    var header = objectContainer.clone();

    counter += 1;
    var collapseId = "collapsible_obj_" + counter;

    header.find(".collapse").attr("id", collapseId);
    header.find("button[data-toggle='collapse']").attr("data-target",   "#"+collapseId);


    header.appendTo('#final');
  };
})();

$('#new').click(addButton);
/**/