用填充的下拉列表复制php表的新行

我正在尝试创建一个新行php表，其中包含两个填充的下拉列表。一行中有三列，其中两列已经填充了下拉列表，如果我从其中选择一个数据，另一个下拉列表将根据我选择的内容自动填充。

我曾试图创建一个新行，但问题是，每当我从任何行的第一个下拉列表中选择时，只有表第一行的第二个下拉列表在更改。我不能让第二个下拉列表的每一行都像从第一个下拉列表中选择时一样工作，同一行列表上的第二个列表会被填充。

这是代码：

addrecipe.php

<script type="text/javascript">
function show(str) {
    if (str=="") {
        document.getElementById("productn").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("productn").innerHTML=xmlhttp.responseText;
        }
    }
xmlhttp.open("GET","pname.php?q="+str,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
function myCreateFunction() {
var i = 10;
var ii = 10;
var iii = 10;
if (i <= 20){
    i++;
    ii++;
    iii++;
   var table = document.getElementById("table");
   var row = table.insertRow(11);
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   cell1.innerHTML = 
    '<select name="product_'+i+'" id="product" onchange="show(this.value)">
    <option value="">Select...</option>
    <?php $sql = mysql_query("SELECT * FROM prodcat");
    while ($row = mysql_fetch_array($sql)) {
    echo '<option value="'.$row['catID'].'">'.$row['prodCat'].'</option>'; }
    ?>  
    </select>';
  cell2.innerHTML = 
   '<select name="productn_'+ii+'" id="productn">   
   <option value="">Select...</option>   
   <?php $sql1 = mysql_query("SELECT * FROM product");  
   while($row1=mysql_fetch_array($sql1))   {
   echo '<option value="'.$row1['IngID'].'">'.$row1['IngName'].'</option>'; }   
   ?>
   </select>';
  cell3.innerHTML = '<input class="style" type="text" name="qty_'+iii+'" id="qty">';
  }
  }
 </script>
 <tr>
                <td>
                <select name="product_1[]" id="product" onchange="show(this.value)">
                <option value="">Select...</option>
                <?php 
                $sql = mysql_query("SELECT * FROM prodcat");
                while ($row = mysql_fetch_array($sql)){
                echo '<option value="'.$row['catID'].'">'.$row['prodCat'].'</option>';
                }
                ?>
                </select>
                </td>
                <td>
                <select name="productn_1[]" id="productn">
                <option value="">Select...</option><?php
                $sql1 = mysql_query("SELECT * FROM product");
                while($row1=mysql_fetch_array($sql1))
                {
                echo '<option value="'.$row1['IngID'].'">'.$row1['IngName'].'</option>';
                }?>
                </select>
                </td>
                <td>
                <input class="style" type="text" name="qty_1[]" id="qty">
                </td>
</tr>

pname.php

$q = intval($_GET['q']);
mysql_connect("$host", "$username", "$password") or die ("cannot connect"); 
mysql_select_db("$db_name") or die ("cannot select DB");
    $sql = mysql_query("SELECT * FROM product WHERE catID='$q'");
    while($row=mysql_fetch_array($sql))
    {
    echo '<option value="'.$row['IngID'].'">'.$row['IngName'].'</option>';
    }