Salve, penso il mio problema sia molto semplice, ma dopo averci perso troppo tempo mi rivolgo al forum per un aiuto.

Ho creato un form che aggiunge campi a seconda di quanto desidera l'utente: il codice HTML è semplicemente

codice:
<div id="readroot" style="display: none">
    <input type="text" value="test" id="name" name="name">
</div>
   
<form method="post" action="index.php">
	              
    <span id="writeroot"></span>

    Aggiungi record
    <input type="submit" value="Conferma" />

</form>
mentre il codice Javascript non dovrebbe far altro (in teoria) che copiare il codice html contenuto nel div readroot e copiarlo subito prima dello span writeroot. Questo è il codice

codice:
<script type="text/javascript">
        var counter = 0;
        window.onload = moreFields();

        function moreFields() {
	  counter++;
	  var newFields = document.getElementById('readroot').cloneNode(true);
	  newFields.id = 'baba';
	  newFields.style.display = 'block';
    	  var newField = newFields.childNodes;
	  for (var i=0;i<newField.length;i++) {
              var theName = newField[i].name;
	      if (theName)
	          newField[i].name = theName + counter;
		  newField[i].onclick = alert(this.name);
	        }
	    var insertHere = document.getElementById('writeroot');
	    inserted = insertHere.parentNode.insertBefore(newFields,insertHere);
        }
</script>
Viene tutto copiato regolarmente... Quello che succede, però, è che nè l'evento onclick che ho messo lì apposta per controllare ne il campo "name" di nessuno dei nodi figli viene effettivamente modificato!!!!
Perchè succede questa cosa?!

Non sono espertissimo di Javascript e mi è venuto il dubbio che i valori vengano modificati solo all'interno della funzione per poi essere "dimenticati" appena fuori da essa, ma non sono riuscito a trovare evidenza di questo fatto