Cloning a DIV with jQuery

Question

I have the following Javascript:

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
}).removeClass("active").end().appendTo("#duplicate-section");

Inside a .click() function. This works fine. However I have the following HTML in the cloned area:

<div class="btn-group" data-toggle="buttons"><label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][1]" value="">Session 1</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][2]" value="">Session 2</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][3]" value="">Session 3</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][4]" value="">Session 4</label>
<label class="btn btn-default button-array active"><input type="checkbox" name="select-sessions[3][5]" checked="" value="">Session 5</label>
</div>

Now, in the above jQuery I have this.checked=false; which makes any cloned checkbox unchecked. But unfortunately, The label.button-array still has the class of active, which means it still looks like it is checked.

So I modified my jQuery function be like this:

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
}).find("label.button-array.active").each(function() {
    $(this).removeClass("active");
}).end().appendTo("#duplicate-section");

Notice the new find() function added on to the first. However, It seems to completely remove all the HTML from the clone, and I end up with a few input boxes and that's about it. I cannot figure out why.

In this image you can see the first cloned area, and then after pressing the button (with the new find() function added in, as shown above):

Help me Stack Overflow, you're my only hope.

Answer 1

You are missing a .end().

So you were operating on the first selection (input), which means instead of appending the cloned div.duplicate-fields to #duplicate-section, you were instead appending your collection of inputs to #duplicate-section (which explains the five checkboxes)

Try replacing your second block with this

$("div.duplicate-fields:last-child").clone().find('input').each(function () {
    this.name = this.name.replace(/\[(\d+)\]/, function (str, p1) { return '[' + (parseInt(p1, 10) + 1) + ']' });
    this.value = "";
    this.checked = false;
}).end().find("label.button-array.active").each(function () {
    $(this).removeClass("active");
}).end().appendTo("#duplicate-section");

---

Bootply - http://www.bootply.com/bPwHVfFzK8