title: How do i access each element in the row?
body: <p>I am currently working on a college project on the GPA calculator whereby the default subjects, subjects code and credits are filled in the table by default and are editable. The students only need to fill in their expected marks for each subjects and then just simply click on a button that has been provided to view the grades and the pointers for each subject. The following code works just okay since I have not finished a large part of it yet, but there is certainly a problem while running the code. The problem is that the button for showing the grades and pointers for each subject only works on the first row of the table. Which means that it updates the grade and pointer of a subject only on the first row on the table. I have provided you with both the html file and js file to run the program and make you understand more on what I am trying to say.</p>
  
  <p><strong>JS Fiddle example:</strong> <a href="https://jsfiddle.net/onyhL6mb/" rel="nofollow noreferrer">https://jsfiddle.net/onyhL6mb/</a></p>
  
  <p>.html file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;title&gt; GPA Calculator &lt;/title&gt;
  &lt;head&gt;
  
  &lt;script src="test_asg3.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form name="gpaCalc"&gt;
  &lt;table id="myTable" border="1"; width: "100%"&gt;
  &lt;tr&gt;
      &lt;th&gt;Code
      &lt;th&gt;Subject
      &lt;th&gt;Credit
      &lt;th&gt;Expected Mark
      &lt;th&gt;Grades
      &lt;th&gt;GPA
      &lt;th&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" name="code" value="SCJ524"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="subject" value="Object-Oriented Programming"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="credit" value="4"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="marks" oninput="getMarks(this.id)"&gt;&lt;/td&gt;
  &lt;td id = "grade"&gt;&lt;/td&gt;
  &lt;td id = "points"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="button" value="Show Grades" onclick="displayGrades()" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" name="code" value="SCJ011"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="subject" value="Software Engineering"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="credit" value="3"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="marks1" oninput="getMarks(this.id)"&gt;&lt;/td&gt;
  &lt;td id = "grade"&gt;&lt;/td&gt;
  &lt;td id = "points"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="button" value="Show Grades" onclick="displayGrades()" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" name="code" value="SCR234"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="subject" value="Operating System"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="credit" value="3"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="marks2" oninput="getMarks(this.id)"&gt;&lt;/td&gt;
  &lt;td id = "grade"&gt;&lt;/td&gt;
  &lt;td id = "points"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="button" value="Show Grades" onclick="displayGrades()" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" name="code" value="SCV122"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="subject" value="Web Programming"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="credit" value="3"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="marks3" oninput="getMarks(this.id)"&gt;&lt;/td&gt;
  &lt;td id = "grade"&gt;&lt;/td&gt;
  &lt;td id = "points"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="button" value="Show Grades" onclick="displayGrades()" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" name="code" value="ENG222"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="subject" value="Advanced Academic English Skills"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="credit" value="2"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="marks4" oninput="getMarks(this.id)"&gt;&lt;/td&gt;
  &lt;td id = "grade"&gt;&lt;/td&gt;
  &lt;td id = "points"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="button" value="Show Grades" onclick="displayGrades()" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="text" name="code" value="BIO683"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="subject" value="Structure and Functions of Proteins"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" name="credit" value="3"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" id="marks5" oninput="getMarks(this.id)"&gt;&lt;/td&gt;
  &lt;td id = "grade"&gt;&lt;/td&gt;
  &lt;td id = "points"&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="button" value="Show Grades" onclick="displayGrades()" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;br&gt;&lt;input type="button" value="Add Subject" onclick="addRow('myTable')" /&gt;
  &lt;!--&lt;input type="button" value="Calculate GPA" onclick="gpacalc()" /&gt; --&gt;
  &lt;!---&lt;br&gt;&lt;input type="submit" value="Calculate GPA" onclick="xxxxxx('yyyy')" /&gt;---&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>.js file</p>
  
  <pre><code>function addRow(myTable)
  {
      var table = document.getElementById("myTable");
  
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
  
      var cell1 = row.insertCell(0);
      var element1 = document.createElement("input");
      cell1.appendChild(element1);
  
      var cell2 = row.insertCell(1);
      var element2 = document.createElement("input");
      cell2.appendChild(element2);
  
      var cell3 = row.insertCell(2);
      var element3 = document.createElement("input");
      cell3.appendChild(element3);
  
      var cell4 = row.insertCell(3);
      var element4 = document.createElement("input");
      cell4.appendChild(element4);
  
      var cell5 = row.insertCell(4);
      var element5 = document.createElement("");
      cell5.appendChild(element5);
  
      var cell6 = row.insertCell(5);
      var element6 = document.createElement("");
      cell6.appendChild(element6);
  
      var cell7 = row.insertCell(6);
      var element7 = document.createElement("");
      cell7.appendChild(element7);
  }
  
  var x;
  
  function getMarks(id)
  {
      x = document.getElementById(id).value;
  }
  
  function displayGrades()
  {
          var grade;
          var gpaPoint;
  
          if(x &gt;= 90 &amp;&amp; x&lt;=100)
          {
              grade = "A+";
              gpaPoint = 4.00;
          }
  
          else if(x &gt;=80 &amp;&amp; x&lt; 90)
          {
              grade = "A";
              gpaPoint = 4.00;
          }
  
          else if(x &gt;=75 &amp;&amp; x&lt; 80)
          {
              grade = "A-";
              gpaPoint = 3.67;
          }
  
          else if(x &gt;=70 &amp;&amp; x&lt; 75)
          {
              grade = "B+";
              gpaPoint = 3.33;
          }
  
          else if(x &gt;=65 &amp;&amp; x&lt; 70)
          {
              grade = "B";
              gpaPoint = 3.00;
          }
  
          else if(x &gt;=60 &amp;&amp; x&lt; 65)
          {
              grade = "B-";
              gpaPoint = 2.67;
          }
  
          else if(x &gt;=55 &amp;&amp; x&lt; 60)
          {
              grade = "C+";
              gpaPoint = 2.33;
          }
  
          else if(x &gt;=50 &amp;&amp; x&lt; 55)
          {
              grade = "C";
              gpaPoint = 2.00;
          }
  
          else if(x &gt;=45 &amp;&amp; x&lt; 50)
          {
              grade = "C-";
              gpaPoint = 1.67;
          }
  
          else if(x &gt;=40 &amp;&amp; x&lt; 45)
          {
              grade = "D";
              gpaPoint = 1.00;
          }
  
          else if(x &lt; 40)
          {
              grade = "F";
              gpaPoint = 0.00;
          }
  
          document.getElementById("grade").innerHTML = grade;
          document.getElementById("points").innerHTML = gpaPoint;
      }
  </code></pre>
  
  <p>I have posted the same question on my other account on here and updated the code using the answers suggested by the other users. However, I am not allowed to post another question on that account since the question that I have posted received "bad reviews" from the other users and hence reached my limit to post another question. Hopefully someone can come up with an idea this time to help with this project.</p>
  
  <p>P/S: it works perfectly fine when i use notepad++ but it doesn't seem to work with the js fiddle example.</p>