multiple alarm clock in javascript add dynamic generated input elements add alarm fields<br><br>

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-html -->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="TextBoxContainer" style="border-style: solid;padding:20px;">
         <!--Textboxes will be added here -->
    </div>
    <br /><center>
    <input id="btnAdd" type="button" value="add an Alarm Field" onclick="AddTextBox();" />

    <script type="text/javascript">
            var alarms = {};
            var room = 0;
            var i = 0;
            
            setInterval(function() {
              var current = new Date();
              for (var nr in alarms) {
                 var alarm = alarms[nr];
                 console.log("checking alarm " + nr + " (" + alarm + ")");
                 if(current.getHours() == alarm.getHours() 
                  && current.getMinutes() == alarm.getMinutes()) { // also check for day, month and year
                    alert("ALERT\n"+alarm);
                 } else{
                    console.log('Alarm ' + nr + '('+alarm+') not matching current date ' + current);
                 }
              }
            }, 60000);
            
            function GetDynamicTextBox(){
                return '<div>Alarm ' + room +':</div><input type="number"style="text-align:center;margin:auto;padding:0px;width:200px;" min="0" max="23" placeholder="hour" id="a'+room+'" /><input type="number" min="0" max="59" placeholder="minute" style="text-align:center; padding:0px; margin:auto; width:200px;" id="b'+room+'" /><input type="date" style="margin:auto;text-align:center; width:200px; padding:10px" id="c'+room+'"><input type="button" value ="Set" onclick = "AddAlarm('+room+');" /> <input type="button" value ="Remove" onclick = "RemoveTextBox(this)" />';
            }
            function AddTextBox() {
                var div = document.createElement('DIV');
                div.innerHTML = GetDynamicTextBox("");
                document.getElementById("TextBoxContainer").appendChild(div);
            }

            function RemoveTextBox(div) {
                document.getElementById("TextBoxContainer").removeChild(div.parentNode);
            }

            function RecreateDynamicTextboxes() {
                    var html = "";
                    html += "<div>" + GetDynamicTextBox() + "</div>";
                    document.getElementById("TextBoxContainer").innerHTML = html;
                    room++;
            }
            window.onload = RecreateDynamicTextboxes;

            function AddAlarm(values){
                var hour = $('#a'+values).val();
                var minute = $('#b'+values).val();
                var date = $('#c'+values).val();
                console.log(hour + ':' + minute + ' on ' + date);
                var dateObj = new Date(date);
                dateObj.setMinutes(minute);
                dateObj.setHours(hour);
                console.log(dateObj);
                alarms[values] = dateObj;
            }
    </script>

<!-- end snippet -->
<br><br>
<a href="https://stackoverflow.com/questions/44417144/multiple-alarm-clock-in-javascript-using-dynamic-generated-input-elements-in-jav
" target="new">
https://stackoverflow.com/questions/44417144/multiple-alarm-clock-in-javascript-using-dynamic-generated-input-elements-in-jav
</a>
<br><br>
theben schakelklok theben-timer 27 classic weektimer 2 hour per flag<br>
<img src="https://www.theben.de/ocsmedia/optimized/960x960/o11032v3%20timer%2027_en-PI.png" width="70%">