JavaScript - Need Help In In Creating Dynamic Fields

<select title="3553" name="3553" onchange="JavaScript:document.cart.add3553.disabled=false;">

<script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e){
				try{
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
    }
	
	function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) {		
		
		var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('schooldiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
	function getSub(id,cid) {		
		var strURL="findSub.php?source="+id+"&cid="+cid;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('subdiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
	}
</script>

<script type="text/javascript">
			var counter = 3;
			function addNew() {
				// Get the main Div in which all the other divs will be added
				var mainContainer = document.getElementById('mainContainer');
				// Create a new div for holding text and button input elements
				var newDiv = document.createElement('div');
				// Create a new text input
				var newText = document.createElement('input');
				newText.type = "text"; 
				newText.value = "DD/MM/AAAA"; 
				newText.name = counter++;
				
				var newText1 = document.createElement('input');
				newText1.type = "text"; 
				newText1.value = "DD/MM/AAAA";
				newText1.name = counter++;
				
				var newText2 = document.createElement('input');
				newText2.type = "text";
				newText2.value = "0"; 
				newText2.name = counter++;

				// Create a new button input
				var newDelButton = document.createElement('input');
				newDelButton.type = "button";
				newDelButton.value = "Delete";

				// Append new text input to the newDiv
				newDiv.appendChild(newText);
				newDiv.appendChild(newText1);
				newDiv.appendChild(newText2);

				
				// Append new button input to the newDiv
				newDiv.appendChild(newDelButton);
				// Append newDiv input to the mainContainer div
				mainContainer.appendChild(newDiv);
				counter++;
				
				// Add a handler to button for deleting the newDiv from the mainContainer
				newDelButton.onclick = function() {
						mainContainer.removeChild(newDiv);
				}
			}
		</script>
<table style="margin-left:200px" border="0">
  <tr><!-- Row 1 -->
     <td width="140"><b>Start Date</b></td><!-- Col 1 -->
     <td width="142"><b>End Date</b></td><!-- Col 2 -->
     <td width="140"><b>Price per week</b></td><!-- Col 3 -->
  </tr>
  </table>
  
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>

<select name="options-1" id="options-1">
<option value="">Select an option</option>
<option value="1">KA-WH</option>
<option value="2">KA-BK</option>
<option value="3">KA-GN</option>
</select>
 
<select name="options-2" id="options-2">
<option value="">Select an option</option>
<option value="4">BADGE-1</option>
<option value="5">BADGE-2</option>
<option value="6">BADGE-3</option>
</select>

<select name="options-3" id="options-3">
<option value="">Select an option</option>
<option value="7">E-WH</option>
<option value="8">E-GD</option>
<option value="9">E-BK</option>
</select>

<link rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css"></style>
        <script type="text/javascript">
            var elCount = 2;
            function add() {
                var parent = document.getElementById('parent');
                var article = document.createElement('DIV');
                article.id = 'article_' + elCount;
                article.name = 'article_' + elCount;                                     // NEW LINE
                var article_title_label = document.createElement('LABEL');
                article_title_label.appendChild(document.createTextNode('Title ' + elCount + ': '));
                var article_title_text = document.createElement('INPUT');
                article_title_text.id = 'article_' + elCount + '_title';
                article_title_text.name = 'article_' + elCount + '_title';                // NEW LINE
                var article_textarea_label = document.createElement('LABEL');
                article_textarea_label.appendChild(document.createTextNode('Price ' + elCount + ': '));
                var article_textarea = document.createElement('INPUT');
                article_textarea.id = 'article_' + elCount + '_price';
                article_textarea.name = 'article_' + elCount + '_price';                // NEW LINE
                article.appendChild(article_title_label);
                article.appendChild(article_title_text);
                article.appendChild(article_textarea_label);
                article.appendChild(article_textarea);
                parent.appendChild(article);
                elCount++;
            }
        </script>
<body>
                  <div id="parent">
                        <div id="article_1">
                            <label for="article_1_title">Title 1: </label><input type="text" name="article_1_title" id="article_1_title" />
                            <label for="article_1_price">Price: </label><input type="text" name="article_1_price" id="article_1_price" />
                       </div>
                  </div>

var someArray = new Array(4);
    
    someArray[0] = "video1/video1.html";
    someArray[1] = "video2/video2.html";
    someArray[2] = "video3/video3.html";

	
        function doCh1(){currentPage = 0; goToPage();}
	function doCh2(){currentPage = 1; goToPage();}
	function doCh3(){currentPage = 2; goToPage();}

/*
Notes: 
	- Each button MUST have a unique name.
	- You may need to create a secondary function that the button can activate like I did with the go(url) function below.
	- Email me (grayatrox) at 238atrox@gmail.com for bugs, or to suggest improvements.
	- Yes I know tables within tables is bad, if you read through my code carefully you will see where I am talking about.
*/
function loadButton() { //preload the buttons. 
	image1 = new Image();
	image1.src = "images/button_up_L.png"; //button up left
	image2 = new Image();
	image2.src = "images/button_up_C.png"; //button up centre
	image3 = new Image();
	image3.src = "images/button_up_R.png"; //button up right
	image4 = new Image();
	image4.src = "images/button_down_L.png"; //button down left
	image5 = new Image();
	image5.src = "images/button_down_C.png"; //button down centre
	image6 = new Image();
	image6.src = "images/button_down_R.png"; //button down right
}

		
function createButton(buttonName, buttonText, buttonAction, id) { // create the code for a button
	output= "<table border='0' cellpadding='0' cellspacing='0' id="+buttonName+">";
	output=output+"<tr name="+buttonName+" onclick=\""+buttonAction+"\" onmouseover=\"changeButton('down', '"+buttonName+"')\" onmouseout=\"changeButton('up', '"+buttonName+"')\">";
	output=output+"<td align='right'><img id='"+buttonName+"_leftImage' src='images/button_up_L.png'/></td>";
	output=output+"<td id='"+buttonName+"_middleImage' align='middle' background='images/button_up_C.png'/>"+buttonText+"</td>";
	output=output+"<td align='left'><img id='"+buttonName+"_rightImage' src='images/button_up_R.png'/></td>";
	output=output+"</tr>";
	output=output+"</table>";
	return output;
}
		
function writeButton(buttonName, buttonText, buttonAction) { // write button immediatly below where function has been called
	document.write(createButton(buttonName, buttonText, buttonAction));
}	

function writeButtonInId(buttonName, buttonText, buttonAction, id) { // write the button in an id
	document.getElementById(id).innerHTML=createButton(buttonName, buttonText, buttonAction);
}
	
function changeButton(action, name) { // button animation
	if (action== "up") {
		document.getElementById(name+'_leftImage').src="images/button_up_L.png";
		document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_up_C.png)";
		document.getElementById(name+'_rightImage').src="images/button_up_R.png";
	} else if (action== "down") {
		document.getElementById(name+'_leftImage').src="images/button_down_L.png";
		document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_down_C.png)";
		document.getElementById(name+'_rightImage').src="images/button_down_R.png";
	}
}

function go(url) { // written becuase there were too many ' and ". You can do this for any javascript function (I hope)
	document.location=url;
}

 
var cell1 = document.createElement("TD");

cell1.innerHTML = '<A HREF= ' + url + 'onMouseOver="' + alert("my alert box"); + '"> my page </A>';

cell1.innerHTML = '<A HREF= "' + url +  '"> my page </A>';
cell1.onMouseOver = alert('alert');

cell1.innerHTML = '<A HREF= "' + url +  '"> my page </A>';
cell1.onMouseOver = function(){alert('alert');};

 
var cell1 = document.createElement("TD");

cell1.innerHTML = '<A HREF= " ' + url + ' " onMouseOver=" alert("my alert box"); "> my page </A>';

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>

<script type="text/javascript">



function showAsset(id,str)
{
if (str=="")
  {
  document.getElementById("assetinfo"+id).innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("assetinfo"+id).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getasset.php?q="+str,true);
xmlhttp.send();
}

var noFields = "5";

function additem()
	{
		var fieldrow = document.createElement('tr');
		var fieldcolumn1 = document.createElement('td');
		var fieldinput = document.createElement('input');
		fieldinput.name = "asset";
		fieldinput.onChange = "showAsset("+noFields+",this.value)";
		var fieldcolumn2 = document.createElement('td');
		fieldcolumn2.id = "assetinfo"+noFields;
		fieldcolumn1.appendChild(fieldinput);
		
		var fieldcolumns = fieldcolumn1 + fieldcolumn2;
		fieldrow.appendChild(fieldcolumns);
		
		var addbefore = document.getElementById('fieldend');
		document.body.insertBefore(fieldrow, addbefore);
		noFields = noFields++;
	}
</script>

</head>
<body>

<form>
	<table>
		<tr>
			<td><input name="asset" onChange="showAsset(1,this.value)"></td>
			<td id="assetinfo1"></td>
		</tr>
		<tr>
			<td><input name="asset" onChange="showAsset(2,this.value)"></td>
			<td id="assetinfo2"></td>
		</tr>
		<tr>
			<td><input name="asset" onChange="showAsset(3,this.value)"></td>
			<td id="assetinfo3"></td>
		</tr>
		<tr>
			<td><input name="asset" onChange="showAsset(4,this.value)"></td>
			<td id="assetinfo4"></td>
		</tr>
		<tr>
			<td><input name="asset" onChange="showAsset(5,this.value)"></td>
			<td id="assetinfo5"></td>
		</tr>
		<tr id="fieldend">
			<td><input id="addfield" type="button" value="add item" onClick="addfield()"></td>
		</tr>
</table>

</form>

</body>
</html>

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'root', 'root');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("assettracking", $con);

$sql="SELECT * FROM assets WHERE assetID = '".$q."'";

$result = mysql_query($sql);


while($row = mysql_fetch_array($result))
	{
	echo "<b>".$row['make'] ." ".$row['model'] ." - ".$row['serialnumber']."</b> | Status: ".$row['statusID']." | Comments: ".$row['comments'];
	}
	
mysql_close($con);
?>

function addmore(addwhat) {
	// count existing boxes to find out next number to use.
	// ?
	if (addwhat == 'addresses') {
	fieldid = 'addressesdiv';
	}
	if (addwhat == 'namesnumbers') {
	fieldid = 'namesdiv';
	}
	var dv = document.getElementById(fieldid).innerHTML;
	var lines = dv.match(/<br>/ig).length;
	
		if (addwhat == 'addresses') {
					document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>';
					}
		if (addwhat == 'namesnumbers') {
					document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>';
					document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>';
					}
	}

<?
if ($_POST['Submit'] == 'Submit') {
echo("sent<br>");
for ($c = 1; $c <= (count($_POST)-1)/2; $c++) {
echo("name" . $c . " = " . $_POST['name'.$c] ."&nbsp;&nbsp;&nbsp;mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>");
}
}

$customer_id = "11";

// get existing data.

// if not yet sent get data from databases
$ok = "no";
		if ($_POST['Submit'] != "Submit") {
		echo("<br>not sent<br>");
		$res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'");
		$maincount = mysql_num_rows($res);
		echo("<br>number of clients = ".$maincount."<br>");
			for ($c = 1; $c <= $maincount; $c++) {
			$_POST['name'.$c] = mysql_result($res, $c-1, "client_name");
			$_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile");
			echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>");
			}
		} else {
						// display last posted info
						echo("<br>sent<br>");

						$ok = "yes";
						// check if info was entrted correctly or not.
						
						for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) {
							if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") {
							echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>");
							$ok = "no";
							$maincount ++;
							}
							if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") {
							echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>");
							$ok = "no";
							$maincount ++;
							}
						}

				}

if ($ok == "no") {
					?>
					<form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&amp;phpsession=" . $phpsession); ?>">
					<div style="width: 850px;">
						<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
						<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
					</div>
					<br style="clear: both;">
					  <a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a> 
					  <input type="hidden" name="customer_id" value="<?=$customer_id;?>">
					  <input type="submit" name="Submit" value="Submit">
					</form>
					<?
					}
?>

<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;
 	
	 //Older Method
		
		field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
	
}
//-->
</script>


<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>

<input type="button" value="Add" onclick="addField('steps_area','',15);"/>