Add/Remove Form Fields

<script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
	//Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
	//		field given in the argument is 'friend_' the last id will be 'friend_4'.
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
 
	//If the maximum number of elements have been reached, exit the function.
	//		If the given limit is lower than 0, infinite number of fields can be created.
	if(count > limit && limit > 0) return;
 
	if(document.createElement) { //W3C Dom method.
		var li = document.createElement("li");
		var input = document.createElement("input");
		input.id = field+count;
		input.name = field+count;
		input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
		li.appendChild(input);
		field_area.appendChild(li);
	} else { //Older Method
		field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
	}
}
//-->
</script>
 
//=============================
//                      HTML CODE
//=============================
 
<form name="frm" method="POST">
<strong>Friends List</strong><br />
<ol id="friends_area">
<li><input type="text" name="friend_1" id="friend_1" /></li>
<li><input type="text" name="friend_2" id="friend_2" /></li>
<li><input type="text" name="friend_3" id="friend_3" /></li>
<li><input type="text" name="friend_4" id="friend_4" /></li>
<li><input type="text" name="friend_5" id="friend_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('friends_area','friend_',10);" />
 
<strong>Enemies List</strong><br />
<ol id="enemies_area">
<li><input type="text" name="enemy_1" id="enemy_1" /></li>
<li><input type="text" name="enemy_2" id="enemy_2" /></li>
<li><input type="text" name="enemy_3" id="enemy_3" /></li>
<li><input type="text" name="enemy_4" id="enemy_4" /></li>
<li><input type="text" name="enemy_5" id="enemy_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('enemies_area','enemy_',0);" />
 
<strong>Neutral List</strong><br />
<ol id="neutrals_area">
<li><input type="text" name="neutral_1" id="neutral_1" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_2" id="neutral_2" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_3" id="neutral_3" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_4" id="neutral_4" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_5" id="neutral_5" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
</ol>
<input type="button" value="Add Neutral Field" onclick="addField('neutrals_area','neutral_',0);" />
</form>