Problem with script looping in javascript code

See more:

Javascript

HTML

I have a work time calculation program. <= subtracts departure time to come
I have a problem with JavaScript code. <= I can't loop it properly.

Anyone know how to do this?

I have html code

// ----------------------------------- Day 1
<input type="time" id="1 id_day_start">
<input type="time" id="1 id_day_end">
<input readonly type="time" id="1 id_day_actual">

// ----------------------------------- Day 2
<input type="time" id="2 id_day_start">
<input type="time" id="2 id_day_end">
<input readonly type="time" id="2 id_day_actual">

// (...)

// ----------------------------------- Day 31
<input type="time" id="31 id_day_start">
<input type="time" id="31 id_day_end">
<input readonly type="time" id="31 id_day_actual">

and i have javascipt code (creating variables, getting id, to update time value in each input bar)

"set interval" - to update time every second (1000 is 1 sec interval and function encasing original code you had down here is because `setInterval` only reads functions) You can change how fast the time updates by lowering the time interval

// ----------------------------------- Day 1

     document.getElementById("1 id_day_start").onchange = function () {
        diff_1()
    };
    document.getElementById("1 id_day_end").onchange = function () {
        diff_1()
    };

    function diff_1() {
         start_1 = document.getElementById("1 id_day_start").value; //to update time value in each input bar
         end_1 = document.getElementById("1 id_day_end").value; //to update time value in each input bar

         start_1 = start_1.split(":");
         end_1 = end_1.split(":");
         var startDate = new Date(0, 0, 0, start_1[0], start_1[1], 0);
         var endDate = new Date(0, 0, 0, end_1[0], end_1[1], 0);
         var diff = endDate.getTime() - startDate.getTime();
         var hours = Math.floor(diff / 1000 / 60 / 60);
         diff -= hours * 1000 * 60 * 60;
         var minutes = Math.floor(diff / 1000 / 60);



         return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
     }

    setInterval(function () {
            document.getElementById("1 id_day_actual").value = diff_1();
        }, 1000);

// ----------------------------------- Day 2
    
    
    document.getElementById("2 id_day_start").onchange = function () {
        diff_2()
    };
    document.getElementById("2 id_day_end").onchange = function () {
        diff_2()
    };

    function diff_2() {
        start_2 = document.getElementById("2 id_day_start").value; 
        end_2 = document.getElementById("2 id_day_end").value; 
        
        start_2 = start_2.split(":");
        end_2 = end_2.split(":");
        var startDate = new Date(0, 0, 0, start_2[0], start_2[1], 0);
        var endDate = new Date(0, 0, 0, end_2[0], end_2[1], 0);
        var diff = endDate.getTime() - startDate.getTime();
        var hours = Math.floor(diff / 1000 / 60 / 60);
        diff -= hours * 1000 * 60 * 60;
        var minutes = Math.floor(diff / 1000 / 60);
        
        
        
        return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
     }


    setInterval(function () {
         document.getElementById("2 id_day_actual").value = diff_2();
     }, 1000); 



   // (...) - up to 31

// ----------------------------------- Day 31 (...)

I have to hang out for each id now and I want to loop it..


I strive for something like this.

What I have tried:

I strive for something like this

    for (i = 0;, i < 31; i++) {



            document.getElementById("_@i id_day_start").onchange = function () {
        diff__@i()
    };
    document.getElementById("_@i id_day_end").onchange = function () {
        diff__@i()
    };
            function diff_@i() {
        start = document.getElementById("@i id_day_start").value;
        end = document.getElementById("@i id_day_end").value;

        start = start.split(":");
        end = end.split(":");
        var startDate = new Date(0, 0, 0, start[0], start[1], 0);
        var endDate = new Date(0, 0, 0, end[0], end[1], 0);
        var diff = endDate.getTime() - startDate.getTime();
        var hours = Math.floor(diff / 1000 / 60 / 60);
        diff -= hours * 1000 * 60 * 60;
        var minutes = Math.floor(diff / 1000 / 60);



        return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
    }

setInterval(function () {
        document.getElementById("_@i id_day_actual").value = diff_@i();
    }, 1000);

    }

I heard I can use eventtarget here, but I have no idea how
Event.target - Web APIs | MDN[^]

thank you very much, but I still have a question, how can I assign this result from this calculation to field name="actual" from 1 to 31?

setInterval(function () {
document.getElementById("@i id_day_actual").value = diff_@i();
}, 1000);

up