function only outputs last values, unless an alert if present

Hi, I am new to the forums and new to Javascript programming. I have come across a problem I just can’t seem to solve. I have an html table with abbreviated data that when it is clicked on, it calls a javascript function to show the full data(which is retrieved from a database using a php script). Each row has a unique id. If I run the code as shown below, it only outputs the data for the last table row. However, if I include an alert right after the xmlHttp.send, it works fine. Any ideas why this is happenin?

Here is the javascript code:

[CODE]function expandLocality(){

var locTable= document.getElementsByTagName(“table”)[0];
//append new headers
var header=locTable.getElementsByTagName(‘tr’)[0];
header.innerHTML=”<th>Taxa</th><th>Country</th><th>State</th><th>Citation</th><th>Locality</th><th>Verbatim Locality</th><th>Lat.</th><th>Long.</th><th>Date</th><th>Type</th><th>Deposition</th>”;
var numRows=locTable.getElementsByTagName(“tr”).length;
for(i=1; i<numRows; i++){
//get the specid for each row then send that to php script to get data
var specRow=locTable.getElementsByTagName(“tr”)[i];
var specid=specRow.id;
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null){
alert (“Your browser does not support AJAX!”);
return;
}

var url=”getLocal.php?specid=”+specid;
xmlHttp.open(“GET”,url,true);
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 && xmlHttp.status == 200){
//response text = new data for each td to append to tr
var output=xmlHttp.responseText;
var temp=output.split(‘|’);
for (j=0; j<temp.length; j++){
y=document.createElement(‘td’);
y.appendChild(document.createTextNode(temp[j]));
document.getElementById(specid).appendChild(y);
}

}
}

xmlHttp.send(null);

//alert(); if this is uncommented, script works fine.
}
}
[/CODE]

I appreciate the help!

Also in #JavaScript _↴