I need help with Autocomplete Dynamic Textbox

[jkeo11]

Hello, i have coded this page:

http://www.advance2000.net/system/ad...rchasepeso.php

click on the "ADD ITEM" button TWICE. now you have created two rows of textboxes. next, enter the letter "M" on the description textbox on the second row. this would then initialize an autocomplete function... you will see two words "memory" and "motherboard" try clicking one of these..

after clicking, i guess you will notice the error in my program. the clicked value (for example "memory") would be sent in the FIRST ROW TEXTBOX instead of the second.... can anyone help me?

Here is the Code of the said Dynamic Textbox:

<script language ="javascript">

row_no=0;
function addRow(tbl,row){
row_no++;
if (row_no<=200){
if (row_no<=200){
if (row_no>=100){
var textbox  = '<input type="text" id="item[]" value='+row_no+' size = "2"  maxlength= "99" name="item[]>"';}
if (row_no<100){
var textbox  = '<input type="text" id="item[]" value='+row_no+' size = "2"  maxlength= "99" name="item[]">';}
var textbox2 = '<input type="text" id="stockcode[]" size = "20" maxlength= "100" name="stockcode[]">';
var textbox3 = '<input type="text" autocomplete="off" id="description" size = "95" maxlength= "100" name="description"  onkeyup="lookup(this.value);" onChange="fill();"><div class="suggestionsBox" id="suggestions" style="display: none;"><img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /><div class="suggestionList" id="autoSuggestionsList"></div>';

				
var textbox4 = '<input type="text" id="qty'+row_no+'" size = "6" maxlength= "100" onChange="Sum()" name="qty[]">';
var textbox5 = '<input type="text" id="price'+row_no+'" size = "15" maxlength= "100" onChange="Sum()" name="price[]">';
var textbox6 = '<input type="text" id="subtotal'+row_no+'" size = "15" maxlength= "101"  onChange="Grand()" name="subtotal[]" readonly>';


var tbl = document.getElementById(tbl);
var rowIndex = document.getElementById(row).value;
var newRow = tbl.insertRow(row_no);
var newCell = newRow.insertCell(0);
newCell.innerHTML = textbox;
var newCell = newRow.insertCell(1);
newCell.innerHTML = textbox2;
var newCell = newRow.insertCell(2);
newCell.innerHTML = textbox3;
var newCell = newRow.insertCell(3);
newCell.innerHTML = textbox4;
var newCell = newRow.insertCell(4);
newCell.innerHTML = textbox5;
var newCell = newRow.insertCell(5);
newCell.innerHTML = textbox6;
}
if (row_no>200){
alert ("Too Many Items. Limit of 20.");
}
}
}
</script>

The VAR TEXTBOX 3 would create the said "description textbox" that is also the textbox that calls the "Fill()" and the Lookup() function of the autocomplete


HERE, we have the said functions:

function lookup(description) {
		if(description.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+description+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#description').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}