clone table rows on fly

Hi,
I am trying to write a javascript which adds row/clone row on fly to a webform which opens in a modal box and add up values of COst Price field.
If I do this without modal box it works fine but within modal box its doesn't works.:mad:
Please help!!!

Code:

---

<script type="text/javascript">
var clone;
function cloneRow(){
var rows=document.getElementById('mytab').getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0,n ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(){
var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow();
}
function addValue(obj){
obj.value=obj.value.replace(/[^\d]/,'');
var fields=document.getElementsByTagName('input'), i=0, tot=0, f;
while(f=fields[i++]){
f.name&&f.name.match(/cost/)?tot+=Number(f.value):null;
}
document.getElementsByName('sum')[0].value=tot;
}
onload=cloneRow;
</script>

---

Code:

---



<?php
    include 'includes/header.inc.php';
?>
<div class="sidebar1">
<br><br>
    <ul class="nav">
  <li><a href="#receive">Receive</a></li>
  <li><a href="#">Link two</a></li>
  <li><a href="#">Link three</a></li>
  <li><a href="#">Link four</a></li>
    </ul>
   
    <!-- end .sidebar1 --></div>
   
  /*some php code ----*/

    <div id="receive" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <form name="receive" method="post" action="receive.php">
        <fieldset>
            <legend>Receive:</legend>
            <table>
            <tr>
            <td align="right">Supplier:</td>
            <td align="left">
            <?php
            echo "<select name=\"suppliers\" value=''>Supplier</option>";
            // printing the list box select command

            while($nt=mysql_fetch_array($result1)){//Array or records stored in $nt
            echo "<option value=$nt[id]>$nt[name]</option>";
            /* Option values are added by looping through the array */
            }
            echo "</select>";// Closing of list box
            ?>
            </td>
            <tr>
            <td align="right">Date:</td>
            <td align="left"><input id='start_dt' class='datepicker' name="date"/></td>
            </tr>
            <tr>
            <td align="right">Bill No:</td>
            <td align="left"><input type="text" size="10" name="billNo" /></td>
            </tr>
            </table>
            <br><br>
            <!--// receivings transaction table -->
            <table id="mytab" border="1">
            <tr>
            <th>Sl No.</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Unit</th>
            <th>Cost Price</th>
            </tr>
            <tr>
            <td><input type="text" size="3" name="slno"></td>
            <td>
            <?php
           
            echo "<select name=\"items\" value=''>Item</option>";
            // printing the list box select command

            while($nt=mysql_fetch_array($result)){//Array or records stored in $nt
            echo "<option value=$nt[id]>$nt[name]</option>";
            /* Option values are added by looping through the array */
            }
            echo "</select>";// Closing of list box
            ?>
            </td>
            <td><input type="text" size="4" name="quantity"></td>
            <td><input type="text" size="4" name="unit"></td>
            <td><input type="text" size="4" name="costprice" onkeyup="addValue(this)"></td>
            </tr>
        </table>
        <br>
        <input type="button" value="Add a new row" onclick="addRow()">
        <p>
        Total: <input type="text" name="sum" readonly="readonly" value="Sum of Cost Price inputs">
        </fieldset>
      <input type="submit" value="Receive">
        </form>
    </div>
    </div>

---