如何使用相同的javascript控制表单中的不同元素

我的表单中有不止一行。基本上每行有两个下拉框。第二个下拉框的值将根据第一个下拉框中的选择进行更新。如何一次将javascript应用于单个行？假设当我更改第二行的第一个下拉框时，我希望第二个下拉框只在第二行更新。此外，我如何使用中的数组将多行数据更新到同一数据库中。这是我的代码：

<form action='purchase.php' method="POST"> 
<table><tr><td>Supplier</td><td>Item Name</td></tr>
<tr><td><select name ="supplier" id = "supplier" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname" id="itemname"><option value = ""> Select Item</option></select>/td></tr>
<tr><td><select name ="supplier" id = "supplier" onchange = "updatesup()">
<option value = "1"> SUPA </option><option value = '2'>SUPB</option></select> </td>
<td> <Select name ="itemname" id="itemname"><option value = ""> Select Item</option></select>/td></tr></table></form>

关于选择供应商。。我想更改itemname下拉列表中的项目。。但我只想更改各自的下拉列表。。。我该怎么做？

这是我使用的javascript

array iteam_a;
item_a[0] = [1, item1, 1];
item_a[1] = [2, item2, 1];
item_a[2] = [3, item2, 1];
item_a[3] = [4, item4, 2];
item_a[4] = [5, item5, 2];
item_a[5] = [6, item6, 2];
function updatesup(){
    removeAllOptions(document.getElementById('itemname'));
    addOption(document.getElementById('itemname'), "", "Select Item");
    for (var i = 0; i <= item_a.length-1; i++){
        if (item_a[i][2] === document.getElementById('supplier').value){
                addOption(document.getElementById('itemname'), item_a[i][0], item_a[i][1]);
            }
     }   
 }
function addOption(selectbox, value, text ){
    var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
 }               
function removeAllOptions(selectbox)
{
var j;
for(j=selectbox.options.length-1;j>=0;j--)
{
    selectbox.remove(j);
}
   }