Fonction onClick d'un type d'entrée = "bouton" ne fonctionne pas

J'ai ce code en cliquant sur le bouton "Obtenir plus de champs" va créer une copie de l'ensemble de la div et de créer des champs. Mais en cliquant sur le bouton rien ne se passe. Tous les autres boutons fonctionnent très bien. Ne sais pas ce que je fais mal.
Merci pour votre aide à l'avance.

<html>
<head>
</head>
<body>
<div id="readroot" style="display: none">
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input name="cd" value="title" />
<select name="rankingsel">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br /><br />
<textarea rows="5" cols="20" name="review">Short review</textarea>
<br />Radio buttons included to test them in Explorer:<br />
<input type="radio" name="something" value="test1" />Test 1<br />
<input type="radio" name="something" value="test2" />Test 2
</div>
<form method="post" action="index1.php">
<span id="writeroot"></span>
<input type="button" id="moreFields" value="Give me more fields!"  />
<input type="submit" value="Send form" />
</form>
</body>
</html>
<script>
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
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;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;
</script>

source d'informationauteur kirk