JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

<table>
<tr class="row_val"><td><div>set 1</div><div>Rev. Bus./LRP</div></td> 
  <td><div class="val1">2</div><div class="val2">8</div></td>    		
   <td><div class="val1">4</div><div class="val2">4</div></td>
  <td><div class="val1">5</div><div class="val2">5</div></td>  
</tr>
<tr class="variance_brdr rowsubvalue">
<td><div>Sum</div></td>
<td><div class="sum">10</div></td> 
<td><div class="sum">8</div></td> 
    <td><div class="sum">10</div></td> 
</tr>
    
    
<tr class="row_val"><td><div>set 2</div><div>Rev. Bus./LRP</div></td> 
  <td><div class="val1">2</div><div class="val2">8</div></td>    		
   <td><div class="val1">4</div><div class="val2">4</div></td>
  <td><div class="val1">5</div><div class="val2">5</div></td>  
</tr>
<tr class="variance_brdr rowsubvalue">
<td><div>Sum</div></td>
<td><div class="sum">10</div></td> 
<td><div class="sum">8</div></td> 
    <td><div class="sum">10</div></td> 
</tr>
    
    
</table>

CSS

.rowsubvalue td {border-top:solid 1px red;}

JavaScript

$(document).ready(function() {
     $(".row_val td").each(function() {
         
         var x  = $(this).children('.val1').text();
         var y = $(this).children('.val2').text();
        // $(this).addClass("green")
         var z = Number(x)+Number(y);
         $(this).parent("tr").next("tr").children("td").children(".sum").html() = z;
         alert(z);
     })
 });