尝试使用Ajax数据库调用填充动态表单字段

Question

我几乎可以正常工作了，但是被卡在了最后一点。我有一个动态的html表单，用户可以单击链接在现有父字段下添加其他字段。这些动态字段包括一个预先填充有数据库条目的列表。 select旁边是两个空文本输入，一旦用户从列表中选择了一个项目，我将使用另一个ajax DB调用填充该文本输入。

当仅添加一个单独的动态表单字段时，我可以使此工作正常，但是当添加多个动态表单字段时，从该字段中选择一个条目只会更改第一个动态字段的文本值。

这是填充字段并构建用户可以添加的其他html表和输入元素的代码：

$php_var = htmlspecialchars($_GET['js_var']);

$sql = "call list_ad_locations_grouped('$php_var');";
$result = mysqli_query($conn, $sql) or die("Query fail: " . 
mysqli_error($conn));
$num_rows = mysqli_num_rows($result);
$conn->next_result();

echo "<table border=\"0\" style=\"width: 100%; cellpadding: 0px; 
cellspacing: 1px;\" ><tr><td style=\"width: 30%; height: 30px;\">\n";
echo "<select name=\"newlocation[]\" id=\"newlocation\" style=\"width: 
218px\" onChange=\"showUser(this.value)\">\n";
echo "<option value=\"0\">Select...</option>\n";
while ($rowz = mysqli_fetch_assoc($result)){
echo "<option value=\"". $rowz['locationID'] ."\">". $rowz['description'] ." 
</option>\n";
}
echo "<select></td>\n";

echo "<td style=\"width: 20%\"><input type=\"text\" name=\"available[]\" 
id=\"avail\" size=\"2\"></td>\n";
echo "<td style=\"width: 22%\"><input type=\"text\" name=\"cost[]\" 
id=\"cost\" size=\"7\" value=\" \"></td>\n";
echo "<td style=\"width: 10%\"></td>\n";
echo "<td><div align=\"left\" style=\"padding-left: 4px\"><a href=\"#\" 
title=\"Delete this location?\" onclick=\"delLocation()\"><img 
src=\"img/delete.png\" border=\"0\"></a></td>\n";
echo "</tr>\n";
echo "</table>\n";

当从选择列表中选择一个项目时，onChange事件将Ajax调用激发到另一个php页面，以使数据库查询来查找值以填充其余输入。使用此代码仅添加一个字段就可以很好地工作：

 function showFields(str)
  {
   if (str=="")
  {
  document.getElementById("available").value="";
  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)
   {
    var data = JSON.parse(xmlhttp.responseText);
    for(var i=0;i<data.length;i++) 
    {

       document.getElementById("avail").value = data[i].theavail;
       document.getElementById("cost").value = data[i].theCost;
    }
  }
 }
   xmlhttp.open("GET","locationprocess2.php?l_var="+str,true);
   xmlhttp.send();
 }

这是需要Ajax调用的php页面：

if (isset($_GET['l_var'])){
$locID = htmlspecialchars($_GET['l_var']);

$query = "Select `cost`, `available` From locations Where `locationID` = 
'$locID'";
 $result = mysqli_query($conn, $query) or die ("Query failed: " . 
 mysqli_error($conn));

while ($row = mysqli_fetch_assoc($result)){
$thecost = $row['cost'];
$theavail = $row['available'];
$info[] = array( 'theCost' => $thecost, 'theavail' => $theavail );

}
echo json_encode($info);

}

else 
{
exit;
}

它需要遍历具有相同ID的表单元素的所有实例，但是我不确定如何在接收JSON输出的JS代码中完成此操作。 非常感谢！