jQuery事件委托将无法正常工作

$("#inputs input.time").mask("00:00:00");
$("#inputs input.time").prop('value', '00:00:00');
Number.prototype.padDigit = function () {
    return (this < 10) ? '0' + this : this;
}
$('#display').click(function () {
    $('#show').show();
});
$('#inputs').on('focus', 'input.time', function () {
    $(this).select();
});
$('#append').click(function () {
    $('#inputs').after("<input type='text' value='00:00:00' class='time' name='time2' /><br>");
});
$('#inputs').on('keyup', 'input.time', function (event) {
    console.log(event);
    var t1 = '00:00:00';
    var mins = 0;
    var hrs = 0;
    var sec = 0;
    $('#inputs input.time').each(function () {
        t1 = t1.split(':');
        var t2 = $(this).val().split(':');
        //console.log(Number(t1[1]) + Number(t2[1]))
        sec = Number(t1[2]) + Number(t2[2]);
        secmns = Math.floor(parseInt(sec / 60));
        mins = Number(t1[1]) + Number(t2[1]) + secmns;
        minhrs = Math.floor(parseInt(mins / 60));
        hrs = Number(t1[0]) + Number(t2[0]) + minhrs;
        sec = sec % 60;
        mins = mins % 60;
        t1 = hrs.padDigit() + ':' + mins.padDigit() + ':' + sec.padDigit()
        console.log(t1)
    });
    if (t1 == 'NaN:NaN:NaN') {
        t1 = '00:00:00';
    }
    $('#total').text(t1);
    /*****************subtract time*****************/
    //new Date(year, month, day, hours, minutes, seconds, milliseconds)
    //problem, if the seconds, mins or hrs of total is bigger than the remaining. Unexpected result
    var start = $('#rem').text();
    var end = $('#total').text();
    s = start.split(':');
    e = end.split(':');
    var se = Number(s[2]) - Number(e[2]);
    var sems = Math.floor(parseInt(sec / 60));
    var mi = Number(s[1]) - Number(e[1]) - sems;
    var mihr = Math.floor(parseInt(mins / 60));
    var hr = Number(s[0]) - Number(e[0]) - mihr;
    if (se < 0) {
        mi = mi - 1;
        se = se + 60;
    }
    if (mi < 0) {
        hr = hr - 1;
        mi = mi + 60;
    }
    var result = hr.padDigit() + ':' + mi.padDigit() + ':' + se.padDigit();
    if (result == 'NaN:NaN:' + se) {
        result = '00:00:00';
    }
    $('#remain').text(result);
});

#remain,
#total {
  background-color: #333;
  width: 60px;
  height: 20px;
  color: #fff;
  padding: 0 10px;
}
#show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<button id='display'>Display</button>
<div id='show'>Remaining:
  <div id='remain'>01:20:30</div>Total:
  <div id='total'>00:00:00</div>
  <div id='rem'>01:20:30</div>
  <br>
  <div id='inputs'>
    <input type='text' class='time' />
    <button id='append'>+</button>
    <br>
  </div>
</div>