Looping JavaScript procedure subtraction on Razor code

Problem/principle of operation:

I have 31 similar procedures / functions. I have 3 inputs, type time, we subtract input 1 from input2 and get the result in input3

My code: I attach the razor code that generates the html code (the loop is generated once at program start and the html code is created). The code generates 31-row tables per Y column.

 @for (int nr_rows = 0; nr_rows < 31; nr_rows++)
        {
            var nr_names = nr_rows + 1;
            <tr>

                @for (int nr_columns = 0; nr_columns < Y; nr_columns++)
                {

                    if (nr_columns == 2)
                    {
                        <td id="td01"><input type="time" class="start"  id="id_start_@nr_names" /></td>
                    }
                    if (nr_columns == 3)
                    {
                        <td id="td01"><input type="time" class="end"  id="id_end_@nr_names" /></td>
                    }

                    if (nr_columns == 7)
                    {
                        <td id="td01"><input readonly type="time" class="actual" id="id_actual_@nr_names" /></td>
                    }
                 }
          }

My problematic code: at the moment I am forced to print 1000 lines of repeated code (scipt / JavaScript) (performing a mathematical operation (subtraction))

// 1x

var elements_s = document.getElementsByClassName("InputsForUserColor1");
var elements_e = document.getElementsByClassName("InputsForUserColor2");

    // --------------------------------- Day 1
    for (var i = 0; i < elements_s.length; i++) {
        elements_s[i].addEventListener("change", function (e) {
            document.getElementById("id_actual_1").value = diff_1();
        });
    }
    for (var i = 0; i < elements_e.length; i++) {
        elements_e[i].addEventListener("change", function (e) {
            document.getElementById("id_actual_1").value = diff_1();
        });
    }

    // --------------------------------- Day 2
    for (var i = 0; i < elements_s.length; i++) {
        elements_s[i].addEventListener("change", function (e) {
            document.getElementById("id_actual_2").value = diff_2();
        });
    }
    for (var i = 0; i < elements_e.length; i++) {
        elements_e[i].addEventListener("change", function (e) {
            document.getElementById("id_actual_2").value = diff_2();
        });         
//+ ------------------------------------------------------------------------- + up to 31 the same


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

    function diff_1() {
        start = document.getElementById("id_start_1").value;
        end = document.getElementById("id_end_1").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;
    }

    // --------------------------------- Day 2


    function diff_2() {
        start = document.getElementById("id_start_2").value;
        end = document.getElementById("id_end_2").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;
    }
//+ ------------------------------------------------------------------ + up to 31 the same

I tried: to organize the code in razor to give the same effect in htmlu as it is below (using classes and fieldsets), unfortunately in my case I can not use fieldsets [ disturbed in practice / this way should be bypassed]

<fieldset class="day">
      <input type="time" class="start">
      <input type="time" class="end">
      <input type="time" class="actual">
    </fieldset>

    <fieldset class="day">
      <input type="time" class="start">
      <input type="time" class="end">
      <input type="time" class="actual" readonly>
    </fieldset>

    <fieldset class="day">
      <input type="time" class="start">
      <input type="time" class="end">
      <input type="time" class="actual" readonly >
    </fieldset>