i need to make a sleep calculator that will show hours in 24h format. I have no idea what went wrong and calc is showing some weird values in minutes ( 1 or 12 min ) Any ideas? i tried to jump beetween HH:MM and hh:mm and seems like hours are working well.

thats the code:

html meaningful for this issue part:

<input data-customClass="form-control" type="text" id="sleepcalc" data-format="HH:mm" data-template="HH : mm" name="datetime" value="6:30">

js part:

    const countButton = document.querySelector('.count-button')
const hoursBox = document.querySelector('.col-md-6')
const textContainer = document.querySelector('.text-container')
const sleepCalc = document.querySelector('#sleepcalc')

countButton.addEventListener("click", ()=>{
  
  textContainer.classList.add('text-container-fade')


  if(hoursBox.style.display = "flex"){
    countButton.style.display = "none"
    
  }

  requestAnimationFrame(() =>
  setTimeout(() => {
    hoursBox.classList.add('col-md-6-fade')
  })
);


})


$(function(){
   
  $('#sleepcalc').combodate({
    customClass: 'form-control'
  });  
  
  $('#sleepcalc, .HOUR, .MINUTE').change( function() {
    updatetime()
  })
  
  
  function updatetime(){
    var interval = moment.duration("01:30:00")
    var secondinterval = moment.duration("03:00:00")
    
    var selectedTime = $('#sleepcalc').combodate('getValue', null)
    
    var time = moment.duration("09:15:00")
    var date = moment(selectedTime)
    date.subtract(time)

    result1 = moment(date).format("H:M")
    result2 = moment(date).add(interval).format("H:M")
    result3 = moment(date).add(secondinterval).format("H:M")

    $('#result1').text(result1).addClass('loaded')
    $('#result2').text(result2).addClass('loaded')
    $('#result3').text(result3).addClass('loaded')
    
    setTimeout(function() {
        $('#result1, #result2, #result3').removeClass('loaded');
    }, 1500)
    
  }              

  updatetime()
  
});