JSFiddle - React, Tailwind, and code Playground

HTML

<table id="total" border="1" width="100%">
    <tbody>
        <tr>
            <td>Total duration time</td>
            <td class="total_duration_time"></td>
        </tr>
    </tbody>
</table>
<table id="data" border="1" width="100%">
    <tbody>
        <tr>
            <td>Anna</td>
            <td>318</td><td class="duration_time">00:02:50</td>
            <td>62700</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>318</td>
            <td class="duration_time">00:00:27</td>
            <td>62703</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>318</td>
            <td class="duration_time">00:00:36</td>
            <td>88455233284</td>
        </tr>
    </tbody>
</table>

JavaScript

// time = 'hh:mm:ss'
function toSeconds( time ) {
    var parts = time.split(':');
    return (+parts[0]) * 60 * 60 + (+parts[1]) * 60 + (+parts[2]); 
}

function toHHMMSS(sec) {
    var sec_num = parseInt(sec, 10); // don't forget the second parm
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = hours+':'+minutes+':'+seconds;
    return time;
}


$(document).ready(function(){
    var total = 0;
    $('#data .duration_time').each(function(){
        total += toSeconds( $(this).text() );
    });
    
    $('.total_duration_time').text( toHHMMSS(total) );
    
})