dynamically add rows within a while loop

Question

I am building a shipping form and have written a php page to query a mysql database for a sales order and display each line item within that order. What I'd like to be able to do is then add a box number (the number of a physical box with product in it) to each line item. For example, line item #1 is for 15 units of product A. If a box holds two units of product A and I am shipping 8 parts or four boxes I'd like to be able to add a row, enter the box number and move on to do something similar for line item #2.

Here is what I have thus far:

<script language="javascript">
      // Last updated 2006-02-21
function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow + 1;
  var row = tbl.insertRow(lastRow);

  // Item cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);

  // Cust PN cell
  var cellBox_Num = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'Box_Num[]';
  el.id = 'Box_Num' + iteration;
  el.size = 18;

  el.onkeypress = keyPressTest;
  cellBox_Num.appendChild(el);
}
function keyPressTest(e, obj)
{
  var validateChkb = document.getElementById('chkValidateOnKeyPress');
  if (validateChkb.checked) {
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
      key = window.event.keyCode; 
    }
    else if(e.which) {
      key = e.which;
    }
    var objId;
    if (obj != null) {
      objId = obj.id;
    } else {
      objId = this.id;
    }
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
  }
}
function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 1) tbl.deleteRow(lastRow - 1);
}

    </script>

//define variables and some other form stuff

$i=0;
$n=1;

while($i < $num1) {

$SO_Line_Item=mysql_result($result1,$i,"SO_Line_Item");
$My_PN=mysql_result($result1,$i,"My_PN");
$My_PN_Rev=mysql_result($result1,$i,"My_PN_Rev");
$Cust_PN=mysql_result($result1,$i,"Cust_PN");
$Cust_PN_Rev=mysql_result($result1,$i,"Cust_PN_Rev");
$Description=mysql_result($result1,$i,"Description");
$SOItemQty=mysql_result($result1,$i,"Qty");
$UOM=mysql_result($result1,$i,"UOM");
$Program=mysql_result($result1,$i,"Program");
$Required_Date=mysql_result($result1,$i,"Required_Date");   
$SOItemShipQty=mysql_result($result2,$i,"count(My_SN)"); 

?>
<tr>
<td width="3px" valign="top" align="center"><?php
echo "$SO_Line_Item";?>
</td>
<td nowrap="nowrap" valign="top" align="center"><?php
echo "$Cust_PN - $Cust_PN_Rev";?>
</td>
<td nowrap="nowrap" valign="top" align="center"><?php
echo "$My_PN - $My_PN_Rev";?>
</td>
<td nowrap="nowrap" valign="top" align="center"><?php
echo "$Description";?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo "$SOItemQty";?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo "$UOM";?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo $SOItemQty - $SOItemShipQty;?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<input size="2" align="right" type="text" name="Qty">
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo "$Required_Date";?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo "$Program";?>
</td>
</tr>
<tr>
<td colspan="10">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<!-- 
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit  
-->
<b><font color="RED">Add/Remove Box Number For This Line Item</font></b>
</p>
</td>
</tr>

<tr>
<td></td>
<td>
<table id="tblSample">
<tr>
    <td>1</td>
    <td><input type="text" name="Box_Num[]"
     id="Box_Num1" size="18" onkeypress="keyPressTest(event, this);" /></td>

  </tr>
</table>
</td>
</tr>
<?php



$i++;
}

I am able to create the form fine, but my add and delete buttons all impact the first instance of the loop. This is understandable as the table ID is 'tblSample' for all instances within the loop. I'm lost as to how to make my Javascript dynamic for each instance of the loop.