JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">6</span></td></tr>
    <tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
    <tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
      <tr class="sub"><td>test | sum <span class="sum_sub">8</span></td></tr>
</table>

CSS

table td {
   border: solid 1px black;
   padding: 4px;
}

.main {
background-color: #cc99ff;
}

JavaScript

$(".sum_main").val( $(".sum_main").val() + $(".sum_main").val() + $(".sum_main").val());