Проблема с циклированием скриптов в коде javascript

---

У меня есть программа расчета рабочего времени. <= вычитает время отправления, чтобы прийти
У меня есть проблема с кодом JavaScript. <= я не могу зациклить его должным образом.

Кто - нибудь знает, как это сделать?

У меня есть html код

// ----------------------------------- 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">

и у меня есть код javascipt (создание переменных, получение идентификатора, обновление значения времени в каждой строке ввода)

"set interval" - для обновления времени каждую секунду (1000-это интервал 1 сек, а функция, заключающая исходный код, который у вас был здесь, потому что "setInterval" только читает функции) Вы можете изменить скорость обновления времени, уменьшив временной интервал

// ----------------------------------- 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 (...)

Теперь я должен болтаться за каждым идентификатором, и я хочу зациклить его..


Я стремлюсь к чему-то подобному.

Что я уже пробовал:

Я стремлюсь к чему-то подобному

    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);

    }

Я слышал, что могу использовать eventtarget здесь, но понятия не имею, как это сделать
Event.target - веб-API | 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);

вверх

---