add row in table form and updating the drop dwon list name

hi everyone,
i really appreciate if someone could help me. for two days im tring to figure it out alone but its not working.
im writing a shoping list to my project at school. i have a table (shopinglist) that contain the form.
in the form i have 2 drop down list, one (product) is getting the values from my database and the second one (quantity)is constant numners. next to these two i have 2 buttons add and remove.
when pressing add i want to add a new row with the same stuff.
the problem is that i can't (or mybe don't know) how to change the select name according to the row number. i mean like <select name="product_3"- distint names to each select option. its important becuase i need to use the selections with asp code and enter it to my database.
one last thing- the row will be added only if the user choose from both selection, not only from one. pleaseeee try to help me...
here is my code:
the javascript add and remove functions:

Code:

---

function addRow(tableID) {
 
if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero")
{
            var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

            var colCount = table.rows[0].cells.length;
       
            for(var i=0; i<=colCount; i++) {
                        var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                          switch(newcell.childNodes[1].type) {
                case "text":
                        newcell.childNodes[1].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[1].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[1].selectedIndex = 0;
                        break;
                               
                }
            }
                          newcell.childNodes[1].visible = true;
                          table.rows[rowCount-1].cells[2].style.visibility="hidden" ;
                        }
            else
          {
            if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value=="zero")
               
                alert("please choose quantity") ;
              if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value!="zero")
                alert("please choose product") ;
              if (document.getElementById("product").value=="dafult" && document.getElementById("quantity").value=="zero")
                    alert("please choose product and qantity") ;
          }
            }
     
        function deleteRow(i){
                if (document.getElementById("product").value!="dafult" && document.getElementById("quantity").value!="zero")
                        document.getElementById('shopinglist').deleteRow(i)
                else
                        alert("you can't delete row before adding it");
}

---

-----------------------------------and the HTML and ASP

Code:

---

<table border="0" id="shopinglist">
<caption valign="top" style="width:90%;height:35px; color:green ;"/> your order
<tr><td></td><td> product</td> <td> quantity</td></tr>
<tr>
<form name="juices">
    <%     
    set rs=Server.CreateObject("ADODB.recordset")
    rs.open "SELECT ID, [Product-Name] ,[size-liter],[Customer price] FROM Product GROUP BY  ID,[Product-Name] ,[Product].[size-liter],[Product].[Customer price] ", conn
    %>
<td>
<select name="product" id="product" width="10" >
<option value="dafult" selected>בחר מוצר מהרשימה</option>
<%
do while not rs.EOF %>
<option value=<%=rs("Product-Name")%> > juice<%=rs("Product-Name")%>  <%=rs("size-liter")%>  liter<%=rs("Customer price")%>  $</option>
<%
rs.MoveNext()
loop
rs.close %>
</select>
</td>
<td>
<select name="quantity" id="quantity">
<option value="zero" selected="selected">0</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
<option value="seven">7</option>
<option value="eight">8</option>
<option value="nine">9</option>
<option value="ten">10</option>
</select>
</td>
<td>
<input type="button" value="add" onclick="addRow('shopinglist')" id="addbutton"/>
</td>
<td>
    <input type="button" value="delete"onclick="deleteRow(this.parentNode.parentNode.rowIndex)" id="remove"/>
</td>
</tr>
        </form>

---