title: jQuery calculating average & sorting result
body: <p>I need to add functions using jQuery to:</p>
  <ol>
  <li>Add row (completed)</li>
  <li>Calculate average score of input. Replace the &quot;?&quot; in the column.</li>
  <li>For average score &gt;=8, the line will be highlighted with red.</li>
  </ol>
  <p>I am supposed to use each() and children() for last 2 functions. But as a beginner, I find this extremely confusing.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var _stt = 1;
    $("#btn-add").click(function() {
      var name = $('input[name="name"]').val();
      var math = $('input[name="math"]').val();
      var physic = $('input[name="physic"]').val();
      var chemistry = $('input[name="chemistry"]').val();
      var calcdtb = "?";
      var addtr = '&lt;tr&gt; &lt;td&gt;' + _stt + '&lt;/td&gt; &lt;td&gt;' + name + '&lt;/td&gt; &lt;td class="mark"&gt;' + math + '&lt;/td&gt; &lt;td class="mark"&gt;' + physic + '&lt;/td&gt; &lt;td class="mark"&gt;' + chemistry + '&lt;/td&gt; &lt;td class="result_dtb"&gt;' + calcdtb + '&lt;/td&gt; &lt;/tr&gt;';
      $("#inputtab").append(addtr);
      _stt++;
    });
    $("#btn-average").click(function() {
  
    })
    $("#btn-sort").click(function() {
  
    })
  
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container" align="center"&gt;
    &lt;h1&gt;Class Marksheet&lt;/h1&gt;
    &lt;form style="padding-bottom: 20px"&gt;
      &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
        &lt;tr&gt;
          &lt;td width="100"&gt;Name&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="name" id="name"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td width="100"&gt;Math Score&lt;/td&gt;
          &lt;td&gt;&lt;input type="number" name="math" id="math"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td width="100"&gt;Physics Score&lt;/td&gt;
          &lt;td&gt;&lt;input type="number" name="physic" id="physic"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td width="100"&gt;Chemistry Score&lt;/td&gt;
          &lt;td&gt;&lt;input type="number" name="chemistry" id="chemistry"&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/form&gt;
    &lt;button type="submit" id="btn-add"&gt;Input&lt;/button&gt;
  &lt;/div&gt;
  &lt;!--Div Tab for showing data input and calculating average value--&gt;
  &lt;div class="tab" align="center" style="padding-top: 10px"&gt;
    &lt;table id="inputtab" style="padding-top: 10px; padding-bottom: 10px"&gt;
      &lt;th&gt;List&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Math&lt;/th&gt;
      &lt;th&gt;Physics&lt;/th&gt;
      &lt;th&gt;Chemistry&lt;/th&gt;
      &lt;th&gt;Average&lt;/th&gt;
    &lt;/table&gt;
    &lt;button type="submit" id="btn-average"&gt;Average&lt;/button&gt;
    &lt;button type="submit" id="btn-sort"&gt;Top Student&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>