This is my full code

```
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">

   <head>
 <style>
    body  {
   background-image:url("rice.png");
  }
  </style>
   <script type="text/javascript" src="js/script.js"></script> 
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

  <link rel='stylesheet' type='text/css' href='css/style.css' />
  <link rel='stylesheet' type='text/css' href='css/print.css' media="print" 
/>
  <script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
   <script type='text/javascript' src='js/example.js'></script>
   </head>

    <body>
     <form name="form1" method="post" class="register" action="<?php echo 
     $_SERVER['PHP_SELF'];?>" >

     <div id="page-wrap">

      <textarea id="header">PURCHASE</textarea>

       <div id="identity">

         <textarea id="address" disabled>AR Traders  Address:
        </textarea >

        <div id="logo">

          <div id="logoctr">
            <a href="javascript:;" id="change-logo" title="Change    
 ">Change Logo</a>
            <a href="javascript:;" id="save-logo" title="Save 
        changes">Save</a>
            |
            <a href="javascript:;" id="delete-logo" title="Delete 
       logo">Delete Logo</a>
            <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
          </div>

          <div id="logohelp">
            <input id="imageloc" type="text" size="50" value="" /><br />
            (max width: 540px, max height: 100px)
          </div>
          <img id="image" src="images/logo.png" alt="logo" />
        </div>

    </div>

    <div style="clear:both"></div>

    <div id="customer">
     <br>
        <textarea id="customer-title">Widget Corp.
        c/o Steve Widget</textarea>

        <table id="meta">
            <tr>
                <td class="meta-head">Invoice #</td>
                <td><textarea name="invoice"></textarea></td>
            </tr>
            <tr>

                <td class="meta-head">Date</td>
                <td><input type="date" name="date" /><br></td>
            </tr>

        </table>

       < /div>

     <fieldset class="row2">
            <legend>Product Details</legend>
            <p> 
                <input type="button" value="Add Product" 
        onClick="addRow('dataTable')" /> 
                <input type="button" value="Remove Product" 
      onClick="deleteRow('dataTable')"  /> 

            </p><br>
           <table id="dataTable" class="form" border="1">
              <tbody>
                <tr class="j">
                  <p>
                    <td><input type="checkbox" required="required" 
      name="chk[]" checked="checked" /></td>
                    <td>
                        <label>Product Details</label>
                        <input type="text" required="required" 
    name="product[]">
                     </td>
                     <td>
                        <label for="brand">Brand</label>
                        <input type="text" class="small"  name="brand[]">
                     </td>
                     <td>
                        <label for="s_brand">Sub Brand</label>
                        <input type="text" required="required" class="small"  
 name="s_brand[]">
                     </td>
                     <td>
                        <label for="qty">Quantity</label>
                        <input type="text" required="required" class="small" 
  id="qty"  name="qty[]" onblur="<?php echo $_SERVER['PHP_SELF'];?>">
                     </td>
                     <td>
                        <label for="prate">Purchase Rate</label>
                        <input type="text" required="required" class="small" 
 id="prate" name="prate[]">
                     </td>
                     <td>
                        <label for="tax">Tax</label>
                        <select id="tax" name="tax" required="required">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                     </td>
                     <td>
                        <label for="srate">Selling Price</label>
                        <input type="text"  class="small"  name="srate[]">
                     </td>
                     <td>
                        <label for="amt">Total Purchase Amount</label>
                        <input type="text" required="required" class="small" 
  id="amt" name="amt[]">
                     </td>
                        </p>
                </tr>
                </tbody>
            </table>
            <script>

     document.getElementById("tax").onblur = function(){
    var tin1 = parseFloat(document.getElementById("qty").value) * 
   parseFloat(document.getElementById("prate").value)
  var tin = parseFloat(document.getElementById("tax").value) / 100
   document.getElementById("amt").value = tin  +  tin1
   }
    </script>
            <div class="clear"></div>
        </fieldset>
      <input class="submit" name="add" type="submit" value="Confirm &raquo;" 
  />

        <div class="clear"></div>
    <div id="terms">
      <h5>Terms</h5>
      <textarea disabled>Designed by Kshathriya Technologix.</textarea>
    </div>

  </div>
  </form>
 </body>

</html>

```

This is my script and form. When I click add button, the form gets added.

The script works only for first form, while I am adding additional forms, the script does not works for them.

This is my full code for design and it's working only for first form and not for the other additional forms which I am adding later.

I pasted my full form code in this.

[![See image](https://i.stack.imgur.com/QdaBB.jpg)](https://i.stack.imgur.com/QdaBB.jpg)

example.js

```
  function addRow(tableID)
  {
   var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
   if(rowCount < 20){                           
      var row = table.insertRow(rowCount);
      var colCount = table.rows[0].cells.length;
     for(var i=0; i<colCount; i++) {
         var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
   }else{
      alert("Maximum Product submitted is 20.");

   }
 }

 function deleteRow(tableID) {
 var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
   for(var i=0; i<rowCount; i++) {
     var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
     if(null != chkbox && true == chkbox.checked) {
        if(rowCount <= 1) {                         
            alert("Cannot Remove all the Passenger.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
          i--;
      }
   }
 }

```