Question

I am trying to clone DIV and it’s inner elements. How can I change the names of all inner elements? Also I have function calls on the radio buttons. I need to change the name of the function also.Here is my HTML code. I appreciate any help.

<div id="clonableDiv">
    <input id="radio_1" type="radio1" onclick="toggleNames1()" value="Yes" name="Yes">
    Yes
    <br>
    <input id="radio_2" type="radio1" onclick="toggleNames2()" value="No" name="No">
    No
    <div id="address">Address:</div>
    <div id="address1">
        <input id="address_1" class="textBox" type="text" maxlength="100" name="address_1">
    </div>
    <div id="country_select">
        Country:
        <select id="country_drop_1" name="country_drop_1" onchange="setCountry(this.selectedIndex)"> 
            <option value="-1"></option>
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
        </select>
    </div>
</div>

Answer 1

Here’s a way to clone that div, update all the IDs and names and then insert the clone into the body:

var cloneCntr = 1;
function makeClone() {
    // clone the div
    var clone = $("#clonableDiv").clone(false);
    // change all id values to a new unique value by adding "_cloneX" to the end
    // where X is a number that increases each time you make a clone
    $("*", clone).add(clone).each(function() {
        if (this.id) {
            this.id = this.id + "_clone" + cloneCntr;
        }
        if (this.name) {
            this.name = this.name + "_clone" + cloneCntr;
        }
    });
    ++cloneCntr;
    $(document.body).append(clone);                         

}

To update the onclick handlers, you can just assign new values to them with obj.onclick = fn;.

You can see it in action here: http://jsfiddle.net/jfriend00/r2RLw/.

Much of this fixup of the clone would not be needed if you didn’t use ID values and only used class names, but if this is part of a form that is getting submitted so you need unique name values, then you will have to do this type of fixed after cloning.