如何将php中的while循环内的2个文本框的数据与javascript相乘？

Once I use the script I did in JavaScript, it only changes the value of the first textbox inside a while loop. Here is my php code:

<?php 
  $edittable=$_POST['selector'];
  $N = count($edittable);
  for($i=0; $i < $N; $i++)
  {
    $result = mysql_query("SELECT * FROM inventory where assetid='$edittable[$i]'");
    while($row = mysql_fetch_array($result))
    {
      extract($row);
?>      <tr>
          <td></td>
          <td><?php echo $assetdesc; ?></td>
          <td><?php echo $serialno ?></td>
          <td><select class="form-control" name="qtyunit" id="qtyunit" onchange="calculate()"  required>
                  <option>----</option>
                  <?php
                  $qtyfirst = 1;
                for($new = $qtyfirst ; $new <= $assetqty; $new++){
                   ?>
                  <option><?php echo $new; ?></option>
                  <?php
                }
                     ?>
                     </select></td>
          <td><?php echo "₱".number_format((float)$purchaseprice, 2, '.', ','); ?></td>
          <input value = "<?php echo $purchaseprice; ?>" name="hiddencost" id="hiddencost" hidden>
          <td><input class="form-control" name="totalcost" id="totalcost" readonly></td>
        </tr>
<?php 
    }
  }
?>

Here is my JavaScript:

<script type="text/javascript">
function calculate() {
var myBox1 = document.getElementById('qtyunit').value; 
var myBox2 = document.getElementById('hiddencost').value;
var result = document.getElementById('totalcost'); 
var myResult = myBox1 * myBox2;
result.value = myResult;
 }
 </script>

the biggest problem I can see here without testing is that you are using the same HTML id attribute multiple times when looping your output with PHP.
you can only use one id name once per document. if you want to work with multiple html elements at once you have to use classes, for example your select:

<select class="form-control" name="qtyunit" class="qtyunit" onchange="calculate()"  required>
    <option>----</option>
    <?php
        $qtyfirst = 1;
        for($new = $qtyfirst ; $new <= $assetqty; $new++){
    ?>
    <option>
        <?php echo $new; ?>
    </option>
    <?php
        }
    ?>
</select>

and then in your javascript:

var myBoxes = document.getElementsByClassName('qtyunit').value; 

note: this example might not be what you want to achieve - I just wanted to point out your primary mistake.

so by far i have solved my problem using this method.

php code:

<?php 
$edittable=$_POST['selector'];
$N = count($edittable);
for($i=0; $i < $N; $i++)
{
$result = mysql_query("SELECT * FROM inventory where assetid='$edittable[$i]'");
while($row = mysql_fetch_array($result))
{
  extract($row);
  ?>      <tr>
          <td></td>
          <td><?php echo $assetdesc; ?></td>
          <td><?php echo $serialno ?></td>
          <td><select class="form-control" name="qtyunit[]" id="qtyunit<?php echo $assetid; ?>" onchange="calculate(<?php echo $assetid; ?>)"  required>
                  <option>----</option>
                  <?php
                  $qtyfirst = 1;
                for($new = $qtyfirst ; $new <= $assetqty; $new++){
                   ?>
                  <option><?php echo $new; ?></option>
                  <?php
                }
                     ?>
                     </select></td>
          <td><?php echo "₱".number_format((float)$purchaseprice, 2, '.', ','); ?></td>
          <input value = "<?php echo $purchaseprice; ?>" name="hiddencost[]" id="hiddencost<?php echo $assetid; ?>" hidden>
          <td><input class="form-control" name="totalcost[]" id="totalcost<?php echo $assetid; ?>" readonly></td>
          </tr>
            <?php 
          }
        }
            ?>

javascript:

<script type="text/javascript">
function calculate(id){
var quantity = document.getElementById('qtyunit'+id).value;
var price = document.getElementById('hiddencost'+id).value;
var sum = parseInt(quantity,10)*parseInt(price,10); 
document.getElementById('totalcost'+id).value = sum;
}
</script>