title: To pass id and name through javascript
body: <p><a href="https://i.stack.imgur.com/FYeKZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FYeKZ.png" alt="enter image description here"></a>
  The output shown on image</p>
  
  <p>Hi am not much expertise in javascript, In my code I have Add-Items &amp; Delete-Items button which is working fine.First row works fine for total calculation function but rest of rows not working because of that Am not able to assign different names and ids for created row. How I can reuse javascript. Also please let me know how to receive data on submit using POST method or this code and how to find total amount of all rows I inserted at the bottom of table.
  Thanks in Advance</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/default.css"/&gt;
          &lt;script type="text/javascript" src="add_rows.js"&gt;&lt;/script&gt; 
          &lt;script&gt;
              function func()
              {
                  var w = document.getElementById("qty").value;
                  var x = document.getElementById("price").value;
                  var z = document.getElementById("total");
                  z.value = Number(w)*Number(x);
              }
          &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;fieldset class="row2"&gt;
                  &lt;legend&gt;Catering Order Details&lt;/legend&gt;
                  &lt;p&gt; 
                      &lt;input type="button" value="Add Items" onClick="addRow('dataTable')" /&gt; 
                      &lt;input type="button" value="Remove Items" onClick="deleteRow('dataTable')"  /&gt; 
                  &lt;/p&gt;
  
              &lt;table id="dataTable" class="form" border="1"&gt;
                    &lt;tbody&gt;
                      &lt;tr&gt;
                        &lt;p&gt;
                          &lt;td&gt;&lt;input type="checkbox" required="required" name="chk[]" /&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;label&gt;Item&lt;/label&gt;
                              &lt;select size="1" name="Item[]" required="required" &gt; 
                              &lt;?php
                                  echo "&lt;option value=''&gt;---Choose Item---&lt;/option&gt;";
                                  $q=mysqli_query($dbConnect1,"SELECT DISTINCT ITEM as Item, ITEM_ID FROM `manage_item`");
                                  while($r=mysqli_fetch_assoc($q))
                                  {
                                  $i=$r['ITEM_ID'];
                                  $n=$r['Item'];
                                  echo "&lt;option value='$i'&gt; $n&lt;/option&gt;";
                                  }
                              ?&gt;
                              &lt;/select&gt;
                           &lt;/td&gt;
                           &lt;td&gt;
                              &lt;label&gt;Quantity&lt;/label&gt;
                              &lt;input type="text" required="required"  name="Qty[]" id="qty" value=""&gt;
                           &lt;/td&gt;
                           &lt;td&gt;
                              &lt;label&gt;Price/Quantity&lt;/label&gt;
                              &lt;input type="text" required="required"  name="Price[]" id="price" value="" onChange="func()"&gt;
                           &lt;/td&gt;
                           &lt;td&gt;
                              &lt;label&gt;Total&lt;/label&gt;
                              &lt;input type="text" required="required"  name="Total[]" id="total" value=""&gt;
                           &lt;/td&gt;
                              &lt;/p&gt;
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/fieldset&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>Here's my script</p>
  
  <pre><code>function addRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      if(rowCount &lt; 100){                     
          var row = table.insertRow(rowCount);
          var colCount = table.rows[0].cells.length;
          for(var i=0; i&lt;colCount; i++) {
              var newcell = row.insertCell(i);
              newcell.innerHTML = table.rows[0].cells[i].innerHTML;
          }
      }else{
           alert("Maximum items is 100.");
  
      }
  }
  
  function deleteRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      for(var i=0; i&lt;rowCount; i++) {
          var row = table.rows[i];
          var chkbox = row.cells[0].childNodes[0];
          if(null != chkbox &amp;&amp; true == chkbox.checked) {
              if(rowCount &lt;= 1) {                         
                  alert("Cannot Remove all the Items.");
                  break;
              }
              table.deleteRow(i);
              rowCount--;
              i--;
          }
      }
  }
  </code></pre>