JSFiddle - React, Tailwind, and code Playground

HTML

<form onsubmit="return false;">
    <div class="col-5">
        <label>
            Page Time
            <input id="pageTime" name="pageTime" type="time" step="1" tabindex="9">
        </label>
    </div>
    <div class="col-5">
        <label>
            Ack Time
            <input id="ackTime" name="ackTime" type="time" step="1" tabindex="10">
        </label>
    </div>
    <div class="col-5">
        <label>
            Arrival Time
            <input id="arrivalTime" name="arrivalTime" type="time" step="1" tabindex="11">
        </label>
    </div>
    <div class="col-5">
        <label>
            Start Replace / Root Cause Found
            <input id="startReplace" name="startReplace" type="time" step="1" tabindex="12">
        </label>
    </div>
    <div class="col-5">
        <label>
            Replaced / Repair Completed
            <input id="replaced" name="replaced" type="time" step="1" tabindex="13">
        </label>
    </div>
    <div class="col-4">
        <label>
            Engagement
            <input type="text" id="engagement" name="engagement" value="" readonly="readonly" />
        </label>
    </div>
    <div class="col-4">
        <label>
            Arrival
            <input type="text" id="arrival" name="arrival" value="" readonly="readonly" />
        </label>
    </div>
    <div class="col-4">
        <label>
            Investigation
            <input type="text" id="investigation" name="investigation" value="" readonly="readonly" />
        </label>
    </div>
    <div class="col-4">
        <label>
            Mitigate
            <input type="text" id="mitigate" name="mitigate" value="" readonly="readonly" />
        </label>
    </div>

    <div class="col-1" style="text-align: center">
        <label>
            Total Ops Phases
            <input type="text" name="totalOpsPhases" id="totalOpsPhases" value="" readonly="readonly" />
        </label>
    </div>
    <div class="col-submit">
        <button...

JavaScript

function toSeconds(time_str) {
    // Extract hours, minutes and seconds
    var parts = time_str.split(':');
    var sum = 0;
    // compute  and return total seconds
    for (c = 0; c <= 2; c++) {
        if (c === 0) {
            sum += parts[0] * 3600;
        } else if (c === 1) {
            sum += parts[1] * 60;
        } else if (c === 2) {
            if (parts[2] !== 'undefined') {
                sum += parts[2];
            }
        }
    }
    return sum;
}
function opsTime() {
    var time = [document.getElementById('pageTime').value, document.getElementById('ackTime').value, document.getElementById('arrivalTime').value, document.getElementById('startReplace').value, document.getElementById('replaced').value];
    // Created an array to easily do the math :)
    // Array mapping:
    // 0 = pageTime
    // 1 = ackTime
    // 2 = arrivalTime
    // 3 = startReplaceTime
    // 4 = replacedTime

    for (i = 0; i <= 4; i++) {
        if (i === 4) {
            var start = time[0];
            var end = time[4];
        } else {
            start = time[i];
            end = time[i + 1];
        }
        var startSec = toSeconds(start);
        var endSec = toSeconds(end);
        var difference = Math.abs(endSec - startSec);
        // format time differnece
        var result = [
            Math.floor(difference / 3600), // an hour has 3600 seconds
            Math.floor((difference % 3600) / 60), // a minute has 60 seconds
            difference % 60
        ];
        // 0 padding and concatation
        result = result.map(function (v) {
            return v < 10 ? '0' + v : v;
        }).join(':');
        var res = [];
        res[i] = result;
    }

    document.getElementById('engagement').value = res[0];
    document.getElementById('arrival').value = res[1];
    document.getElementById('investigation').value = res[2];
    document.getElementById('mitigate').value = res[3];
    document.getElementById('totalOpsPhase').value = res[4];
}