I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name.
I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code

Code:
<html>
<head>
<title>form</title>
<content="text/html"; />
<script type="text/javascript">
<!--
window.onload = function () {
	if (self.init)
		init();
	}
var counter = 0;
var counter1 = 0;

function init() {
	document.getElementById('moreFields').onclick = moreFields;
	document.getElementById('moreFields1').onclick = moreFields1;
	moreFields();
	moreFields1();
}

function moreFields() {
	counter++;
	var newFields = document.getElementById('readcomp').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('writecomp');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

function moreFields1() {
	counter1++;
	var newFields = document.getElementById('readsubgr').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 + counter1;
	}
	var insertHere = document.getElementById('writesubgr');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
</head>

<body>

<div id="readcomp" style="display: none">
	Comp name<input type=text name="comp" value="" size="2"/>
	Concentration<input type=text name="comp_qty" value="" size="2"/>
	<input type="button" value="Remove comp"
		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/>
	<span id="writesubgr"></span>
	<input type="button" id="moreFields1" value="add subgroup" /><br/><br/>
</div>

<div id="readsubgr" style="display: none">
	Subgroup Name<input type=text name="subgroup" value="" size="2"/>
	Quantity <input type=text name="subgroup_qty" value="" size="2"/>
	<input type="button" value="Remove subgroup"
		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>

<form action="cgi_bin\show_input.pl" method="post">
	<span id="writecomp"></span>
	<input type="button" id="moreFields" value="add comp" /><br/><br/>
	<input value="Run Program" type="submit"> <input value="Reset all fields" type="reset">
</form>
</body></html>
any help would be appreciated.
thanks