JSFiddle - React, Tailwind, and code Playground

by Muhammad Tanzil

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="parent_colapse">
    <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>
      <button type="button" class="button">click</button>
    </div>
      </div>
    <button type="button" id="button" style="margin-top:60px">Clone</button>

JavaScript

$(function(){
      var target = "collapsible_obj_";
      var i = 1;
      
      $("#button").click(function(){
        $(".parent_colapse:last").clone().insertAfter(".parent_colapse:last");        
        $(".parent_colapse:last > button").attr("data-target", "#"+target+i);
        $(".parent_colapse:last .collapse").attr("id", target+i);
        i++;
      });
      
      $(document).on("click",".button",function(){
         alert();
      }); 
      
      // Try below code, it won't work
       /*$(".button").on("click",function(){
         alert();
      });*/
    });