JSFiddle - React, Tailwind, and code Playground

HTML

<p><span>Current Duration</span><input id="txt1" onblur="sum();" type="text" autocomplete="off" name="current_duration" value="" /></p>
<p><span>Previous Duration</span><input id="txt2" onblur="sum();" type="text" autocomplete="off" name="previous_duration" value="" /></p>
<p><span>Total Duration</span><input id="txt3" type="text" readonly autocomplete="off" name="total_duration" value="" /></p>

JavaScript

function sum() {
    var txtFirstNumberValue = document.getElementById('txt1').value;
    var txtSecondNumberValue = document.getElementById('txt2').value;

    var result = fromTime(txtFirstNumberValue) + fromTime(txtSecondNumberValue);

    if (!isNaN(result)) {
        document.getElementById('txt3').value = toTime(result);
    }
}

function fromTime(time) {
    var timeArray = time.split('.');
    var hours = parseInt(timeArray[0]);
    var minutes = parseInt(timeArray[1]);

    return (hours * 60) + minutes;
}

function toTime(number) {
    var hours = Math.floor(number / 60);
    var minutes = number % 60;

    return hours + "." + (minutes <= 9 ? "0" : "") + minutes;
}