Trigger alarm when input values equals to current time

I want to create multiple alarm clocks and trigger any of the alarm if at any time the value of that alarm (hour and minute) equals the current time (hour and minute). I generates the alarm from user inputs, where the user input the set time (hour and minute) that they want the alarm to trigger, and any time the user input matches the current time, the alarm should be triggered. The problem here is that, the alarm doesn't ring. The set time will pass and the alarm will refuse to ring. Here is my code.

CSS

#ring {display:none;}
li {list-style-type: none; border: solid gray 1px; padding:10px; margin: 3px;}

HTML

<body onload="startTime()">
<div id="txt"></div> <br>
<h1 id="ring">Ring!!!!!!!!!</h1>

<input type="text" placeholder="hour" id="hour">
<input type="text" placeholder="minute" id="minute">
<button onclick="addAlarm()">Set alarm</button>


<ul id="list">
<!--Alarm clocks goes here-->
</ul>

</body>

JAVASCRIPT

function startTime(alarmHour, alarmMinute) {
  var today = new Date();
  var currentHour = today.getHours();
  var currentMinute = today.getMinutes();
  var currentSecond = today.getSeconds();
  document.getElementById('txt').innerHTML =
  currentHour + ":" + currentMinute + ":" + currentSecond;
  var t = setTimeout(startTime, 500);

  
  if(currentHour == alarmHour && currentMinute == alarmMinute) {
  document.getElementById("ring").style.display = "block"
  }
 
};


var list = document.getElementById("list");
var alHour = document.getElementById("hour");
var alMinute = document.getElementById("minute");


function newAlarm(hour, minute){
    startTime(hour, minute)
    theAlarm = `<li><span>${hour}:</span><span>${minute}</span></li>`; 

    var position = "afterbegin";
    list.insertAdjacentHTML(position, theAlarm);
              

  }

  function addAlarm(){
   var hour = parseInt(alHour.value);
   var minute = parseInt(alMinute.value);
    if (hour, minute) {
      newAlarm(hour, minute);
      alHour.value ="";
      alMinute.value ="";
    }
  };

Solution

Um I dont get your question to much but here I fixed the code according to what you said

var alarmhour;
var alarmminute;

setInterval(function() {
  var today = new Date();
  var currentHour = today.getHours();
  var currentMinute = today.getMinutes();
  var currentSecond = today.getSeconds();
  document.getElementById('txt').innerHTML =
    currentHour + ":" + currentMinute + ":" + currentSecond;
  if (currentHour == alarmhour && currentMinute == alarmminute) {
    document.getElementById("ring").style.display = "block";
  }

}, 500)


var list = document.getElementById("list");
var alHour = document.getElementById("hour");
var alMinute = document.getElementById("minute");


function newAlarm(hour, minute) {
  alarmhour = hour;
  alarmminute = minute;
  theAlarm = `<li><span>${hour}:</span><span>${minute}</span></li>`;

  var position = "afterbegin";
  list.insertAdjacentHTML(position, theAlarm);


}

function addAlarm() {
  var hour = parseInt(alHour.value);
  var minute = parseInt(alMinute.value);
  if (hour, minute) {
    newAlarm(hour, minute);
    alHour.value = "";
    alMinute.value = "";
  }
};

#ring {
  display: none;
}

li {
  list-style-type: none;
  border: solid gray 1px;
  padding: 10px;
  margin: 3px;
}

<body>
  <div id="txt"></div> <br>
  <h1 id="ring">Ring!!!!!!!!!</h1>

  <input type="text" placeholder="hour" id="hour">
  <input type="text" placeholder="minute" id="minute">
  <button onclick="addAlarm()">Set alarm</button>


  <ul id="list">
    <!--Alarm clocks goes here-->
  </ul>

</body>

Click the run snippet above to see the code running