I'm trying to clone a bootstrap element that has data-toggle behavior provided by bootstrap:

**HTML**

```
<div class="container">
<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>

```

After cloning, I am changing the `ID` of the **div** to a new unique id, and the `data-target` of the button to point to the **new div**. 

**JS**

```
  var header = objectContainer.clone(true);
  var counter = this.collapsibleObjCounter++;
  var collapseId = "collapsible_obj_" + counter;
  header.find(".collapse").attr("id", collapseId);
  header.find("button[data-toggle='collapse']").attr("data-target", "#"+collapseId);

```

The button and div are children of the object container I am **cloning**. 

Sometimes this works, but sometimes I end up with a button that still expands and contracts the original div, even though when I inspect the HTML, the IDs look correct. 

I suspect that the event handler that is copied may be hard coding the reference to the id of the div to be expanded and contracted, which is why just fixing the IDs in the DOM elements doesn't work. However, that doesn't explain why some of the clones work and others do not. 

What is the correct way to clone something that has bootstrap behaviors attached to it? 

So, a couple of answers have pointed out that just removing `true` from my `clone()` call will avoid copying the event listener. So I now realize that my problem is a little more complicated than the one I oversimplified here. I will ask it as a separate question. ([Cloning a Bootstrap element but not all of the event listeners](https://stackoverflow.com/questions/38707524/cloning-a-bootstrap-element-but-not-all-of-the-event-listeners))