title: javascript not calculating value with same ID
body: <pre><code>&lt;tr&gt;
      &lt;td&gt;&lt;input type="text" name="description" required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="quantity" id="quantity" onkeyup="sum();" required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="price" id="price" onkeyup="sum();" required /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="lineTotal" id="lineTotal" readonly /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" onclick="addLine();" value="+" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Below is my javascript code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function addLine() {
        var tabLines = document.getElementById("tabLines");
        var tabLinesRow = tabLines.insertRow(tabLines.rows.length-1);
        var col1html = "&lt;input type='text' name='description' /&gt;";
        var col2html = "&lt;input type='text' name='quantity' id='quantity' onkeyup='sum();' /&gt;";
        var col3html = "&lt;input type='text' name='price' id='price' onkeyup='sum();' /&gt;";
        var col4html = "&lt;input type='text' name='lineTotal' id='lineTotal' readonly /&gt;";
        var col5html = "&lt;input type='button' onclick='removeLine(this);' value='-'&gt;";
  
  
        var col1 = tabLinesRow.insertCell(0); col1.innerHTML=col1html;
        var col2 = tabLinesRow.insertCell(1); col2.innerHTML=col2html;
        var col3 = tabLinesRow.insertCell(2); col3.innerHTML=col3html;
        var col4 = tabLinesRow.insertCell(3); col4.innerHTML=col4html;
        var col5 = tabLinesRow.insertCell(4); col5.innerHTML=col5html;
      }
  
      function removeLine(lineItem) {
        var row = lineItem.parentNode.parentNode;
        row.parentNode.removeChild(row);
      }
  
      function sum() {
          var q = document.getElementById('quantity').value;
          var p = document.getElementById('price').value;
          var result = parseInt(q) * parseInt(p);
  
          if(q=="" || p==""){
              document.getElementById('lineTotal').value = 0;
          }
  
          if (!isNaN(result)) {
              document.getElementById('lineTotal').value = result;
          } 
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I am trying to do some calculations here. When i calculate the default single row, it does calculate, when i press on add button and i do some calculations in the second row it works, but when i add more rows it does not calculate. I don't know how to solve it. Please help as i a newbie in javascript</p>