JSFiddle - React, Tailwind, and code Playground

HTML

<input id="time1" value="1:45" size="5" type="time">Time 1
<br>
<input id="time2" value="1:30" size="5" type="time">Time 2

<br><button id="addTimes">Add times</button>
<br><br>Result<input id="timeSum" type="text">00:00

<br>

CSS

input, #timeSum {
  margin: 10px;
}

JavaScript

Number.prototype.padDigit = function () {
        return (this < 10) ? '0' + this : this;
    }

 $("#addTimes").on('click', function () {
      var t1 = "00:00";
      var mins = 0;
      var hrs = 0;
        $('input').each(function () {
            t1 = t1.split(':');
            var t2 = $(this).val().split(':');
            console.log(Number(t2[1]) + Number(t1[1]))
            mins = Number(t2[1]) - Number(t1[1]);
            minhrs = Math.floor(parseInt(mins / 60));
            hrs = Number(t2[0]) - Number(t1[0]) - minhrs;
            mins = mins % 60;
            t1 = hrs.padDigit() + ':' + mins.padDigit()
            console.log(t1)
        });
        $('#timeSum').text(t1);
    });