title: Get data from table row to Javascript
body: <p>I have table . There are three columns : Name , Price and button "Make Order". I must get data from each row to my Javascript. Each input have id such as productName and productPrice . 
  Table code: </p>
  
  <pre><code>&lt;table border="2px"&gt;
  &lt;tr&gt;
  &lt;th&gt;Name&lt;/th&gt;
  &lt;th&gt;Price&lt;/th&gt;
  &lt;/tr&gt;
  &lt;c:forEach items="${productList}" var="product" varStatus="status"&gt;
  &lt;tr&gt;
      &lt;form&gt;
      &lt;td&gt; ${product.getProductName()}&lt;/td&gt;
      &lt;input type="hidden" id="productName" name="productName" value=${product.getProductName()}&gt;
      &lt;td&gt;${product.getPrice()}&lt;/td&gt;
      &lt;input type="hidden" id="productPrice" name="productPrice" value=${product.getPrice()}&gt;
      &lt;td&gt;&lt;input type="submit" onclick="makeOrder()" value="Make Order"&gt;&lt;/td&gt;
      &lt;/form&gt;
  &lt;/tr&gt;
    &lt;/c:forEach&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>And my js:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function makeOrder() {
      var n=document.getElementById("productName").value;
      var p=document.getElementById("productPrice").value;
      alert("n="+n);
      alert("p="+p);
      //var win=window.open("/user/makeOrder?productName=" + n + "&amp;productPrice=" + p);
  }
  </code></pre>
  
  <p></p>
  
  <p>But when I click on my button I always alert first row of my table . 
  How can I alert other row ? </p>