[Javascript] JS Help: Dynamic form control

[Michael Hulse]

I can't seem to get the Javascript to target form elements that are
wrapped in div tags...

Hi,

I can't seem to figure this one out... maybe someone on the list can
point me in the right direction?

Here is the JS:

<snip>
/******
<http://www.zaslavskiy.net/cm-sources&file=/templates/ 
image_upload.tpl.php>
<http://www.quirksmode.org/dom/domform.html>
******/
var counter = 0;

function moreFields() {
	counter++;
	var newFields = document.getElementById('readroot').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	newFields.firstChild.nodeValue=counter + '. ';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name;
		if (theName) {
			newField[i].name = theName + counter; /* We need the name for php  
processing $_POST later. */
			newField[i].id = theName + counter; /* Need an id for the javascript  
manipulation because there is no getElementByName() only Id. */
		}
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}
function delField() {
	var writeroot = document.getElementById('writeroot');
	if(counter >= 1) {
		writeroot.parentNode.removeChild(writeroot.previousSibling);
		counter--;
	}
}

//setTimeout(moreFields, 100);

/*window.onload = moreFields;*/
event_attach('onload', moreFields);
</snip>

The problem is this: I can't seem to get the Javascript to target form
elements that are wrapped in div tags which are children of ID  
"readroot"...

Example:

<snip>
<div id="readroot" style="display: none">
	
	<div class="fm-req">
		<label for="item">* Item name:</label>
		<input name="item" type="text" title="Item name" />
	</div>
	
	<div class="fm-req">
		<label for="product">* Product #:</label>
		<input name="product" type="text" title="Product number" />
	</div>
	
	<div class="fm-opt">
		<label for="quantity">Quantity desired:</label>
		<input name="quantity" type="text" title="Desired quantity" />
	</div>
	
	<input id="fm-remove" type="button" value="Remove Item"
onclick="delField();" />

	<div class="horizRule"></div>

</div>
</snip>

Basically, when I remove the div tags (fm-req and fm-opt) the JS works
perfectly... How can I tell the script to look at the form items that
are children of the above mentioned divs?

Any help would be greatly appreciated.

TIA!
Cheers,
Micky