JSFiddle - React, Tailwind, and code Playground

HTML

<table id="sum_table" width="300" border="1">
    <tr class="titlerow">
        <td>Apple</td>
        <td>Orange</td>
        <td>Watermelon</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">2</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">2</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">5</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr class="totalColumn">
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
    </tr>
</table>

JavaScript

var totals=[0,0,0];
$(document).ready(function(){

    var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");
    
    $dataRows.each(function() {
        $(this).find('.rowDataSd').each(function(i){        
            totals[i]+=parseInt( $(this).html());
        });
    });
    $("#sum_table td.totalCol").each(function(i){  
        $(this).html("total:"+totals[i]);
    });

});