Dynamically Adding Form Fields

[ShoeLace1291]

I am creating an image uploading system using PHP and MySQL.  I want the user to be able to upload more than one image at a time.  So the system I want is that once the user chooses a photo, he can then decide to add an additional photo by clicking a submit button to add another file input field.  I found a script online and it works, but there's only one problem.  When it adds the extra field, it duplicates the value of the first field.  How would I manipulate this so that the button adds another file input but with no value while still maintaining the value(s) of the previously added files?

 

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);
}

[arbitter]

I think it copies all hte values because it uses cloneNode. If you really only want to add another input-box, why not simply insert an input field with the new name?