javascript — дублирование новой строки таблицы 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>';
}