Duplicare moduli tramite dom

[strae]

Ciao ragazzi, io ho un markup di un form html molto complesso, con molti nodi e child..
Ora, ho bisogno che a un click dell'utente una parte di questo form venga duplicata: praticamente un copia/incolla del div, incrementando gli id degli input (e possibilmente delle label a loro associate).

Ho trovato questo codice in rete:

var counter = 0;

function moreFields(div) {
    counter++;
    var newFields = document.getElementById(div).cloneNode(true);
    newFields.id += '-' + counter;
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0; i < newField.length; i++) {
        var theName = newField[i].id + '_' + counter;
        if (theName){
            newField[i].id = theName;
        }
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields, insertHere);
} 

E funziona, solo che incremente l'id solo del primo sottolivello (i primi child).. io invece ho bisogno che modifichi l'id di tutti gli elementi contenuti nel div da clonare (anzi, di tutti gli elementi che hanno un id settato).

Quel codice l'ho trovato QUI, un esempio del markup che ho io potrebbe essere questo (il div da clonare è 'ship-block')

<div class="form-block" id="ship-block">
    <div class="title">Dati Spedizione</div>
    <div class="form-row">
        <label for="ship-label">Identificativo :</label>
        <div class="form-input">
            <input type="text" name="ship-label" id="ship-label" value="Principale" class="medium" rel="ship" />
        </div>
        <div class="clear"></div>
    </div>
    <div class="form-row">
        <label for="delivery-name">Nome Recapito :</label>
        <div class="form-input">
            <input type="text" name="delivery-name" id="delivery-name" value="" class="medium" rel="ship" />
        </div>
        <div class="clear"></div>
    </div>
</div> 

e il div clonato è:

<div id="ship-block-1" class="form-block" style="display: block;">
    <div class="title" id="_1">Dati Spedizione</div>
    <div class="form-row" style="background-color: rgb(245, 245, 245);" id="_1">
        <label for="ship-label">Identificativo :</label>
        <div class="form-input">
            <input type="text" rel="ship" class="medium" value="Principale" id="ship-label" name="ship-label"/>
        </div>
        <div class="clear"/>
    </div>
    <div class="form-row" id="_1">
        <label for="delivery-name">Nome Recapito :</label>
        <div class="form-input">
            <input type="text" rel="ship" class="medium" value="" id="delivery-name" name="delivery-name"/>
        </div>
        <div class="clear"/>
    </div>
</div> 

Come posso fare?

Non sono molto esperto del DOM, ma a grandi linee credo che dovrebbe venire fuori una cosa del genere:

var counter = 0;
var otherNode;


function moreFields(div) {
    counter++;
    var newFields = document.getElementById(div).cloneNode(true);
    newFields.id += '-' + counter;
    newFields.style.display = 'block';
    
    while(otherNode = newFields.childNodes){
        newField = newFields.childNodes
        for (var i=0; i < newField.length; i++) {
            var theName = newField[i].id + '_' + counter;
            if (theName){
                newField[i].id = theName;
            }
        }
        otherNode = newField;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields, insertHere);
} 

ma la funzione và in loop e blocca il browser.
Quello che volevo fare con quella modifica era, in pratica, 'finchè l'elemento ha dei figli, incrementa l'id di ogni figlio'

Un aiutino?