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">00:55:23</td>
        <td class="rowDataSd">00:55:23</td>
        <td class="rowDataSd">00:55:23</td>
    </tr>
    <tr>
        <td class="rowDataSd">00:55:23</td>
        <td class="rowDataSd">00:55:23</td>
        <td class="rowDataSd">00:55:23</td>
    </tr>
    <tr>
        <td class="rowDataSd">00:55:23</td>
        <td class="rowDataSd">00:55:23</td>
        <td class="rowDataSd">00:55:22</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], [0,0,0], [0,0,0]];
$(document).ready(function () {

    var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");

    $dataRows.each(function () {
        $(this).find('.rowDataSd').each(function (i) {
            time = $(this).html().split(":")
            totals[i][2] += parseInt(time[2]);
            if(totals[i][2] > 60)
            {
                totals[i][2] %= 60;
                totals[i][1] += parseInt(time[1]) + 1;          
            }
            else
                totals[i][1] += parseInt(time[1]);
                
            if(totals[i][1] > 60)
            {
                totals[i][1] %= 60;
                totals[i][0] += parseInt(time[0]) + 1;          
            }
            else
                totals[i][0] += parseInt(time[0]);
        });
    });
    $("#sum_table td.totalCol").each(function (i) {
        console.log(totals[i]);
        $(this).html("total:" + totals[i][0] + ":" + totals[i][1] + ":" + totals[i][2]);
    });

});