Dynamically adding duplicate (unique ID) form Div elements using javascript

http://stackoverflow.com/questions/13878197/dynamically-adding-duplicate-unique-id-form-div-elements-using-javascript

by phusick

HTML

<div id="fieldset" class="row">
   <div class="field">
      <input class="" type="text" name="college" id="college" placeholder="college"/>
   </div>

   <div class="field">
      <input class="" type="text" name="city" id="city" placeholder="city"/>
   </div>

   <div class="field">
      <input class="" type="text" name="zip" id="zip" placeholder="zip"/>
   </div>
</div>
<input type="button" class="buttonWidth" id="btnAddressAdd" value="Add Worksite Addressess"/>

CSS

body {
    padding: 30px;
}

JavaScript

(function(){
    
    var button = document.getElementById("btnAddressAdd");
    
    button.addEventListener("click", function() {
        var sourceNode = document.getElementById("fieldset");
        var node = duplicateNode(sourceNode, ["id", "name", "placeholder"]);
        
        sourceNode.parentNode.appendChild(node);
    }, false);

    
    var counter = 0;
    function duplicateNode(/*DOMNode*/sourceNode, /*Array*/attributesToBump) {
        counter++;
        var out = sourceNode.cloneNode(true);
        if (out.hasAttribute("id")) { out["id"] = bump(out["id"]); }
        var nodes = out.getElementsByTagName("*");
        
        for (var i = 0, len1 = nodes.length; i < len1; i++) {
            var node = nodes[i];
            for (var j = 0, len2 = attributesToBump.length; j < len2; j++) {
                var attribute = attributesToBump[j];
                if (node.hasAttribute(attribute)) {
                    node[attribute] = bump(node[attribute]);
                }
            }
        }
        
        function bump(/*String*/str) {
            return str + "_" + counter;
        }
      
        return out;
    }

})();