Looping change listening and counting loop in JavaScript

Problem/principle of operation:

1. I have tables, divided into X rows and Y columns. In creating the table uses Razor syntax for ASP.NET Core.
2. In the table I have to make a mathematical equation giving me the differences of two inputs with type = "time" (max 23:59), and quickly write this difference to the third input.

The processed razor code to html looks like this:

<table>

<tr class="day"> 
  <td class="forUser1"><input type="time" class="start" id="start_1"></td>
  <td class="forUser2"><input type="time" class="end"  id="end_1"></td>
  <td class="forUser3"><input type="time" class="actual"  id="actual_1" readonly></td>
</tr>

<tr class="day">
  <td class="forUser1"><input type="time" class="start"  id="start_2"></td>
  <td class="forUser2"><input type="time" class="end" id="end_2"></td>
  <td class="forUser3"><input type="time" class="actual" id="actual_2" readonly></td>
</tr>


</table>

Notes:

1. I gave only 2 cases, ultimately I have over 30 cases

I am currently calculating by:

  var elements_s = document.getElementsByClassName("forUser1");
  var elements_e = document.getElementsByClassName("forUser2");


 for (var i = 0; i < elements_s.length; i++) {
        elements_s[i].addEventListener("change", function (e) {
            document.getElementById("actual_1").value = diff_1();
                           // (---- few lines code later)
            document.getElementById("actual_31").value = diff_31();
        });
    }


 for (var i = 0; i < elements_e.length; i++) {
        elements_e[i].addEventListener("change", function (e) {
            document.getElementById("actual_1").value = diff_1();
                          //  (---- few lines code later)
            document.getElementById("actual_31").value = diff_31();
        });
    }

// I have these diff functions from diff_1 to diff_31

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

What am I looking for?

1. I'm looking for a way to loop my code
2. Tips on how to do the job

Notes:

1. I tried to use querySelectorAll/parentNode but I have no idea how to use it with and
2. The html code cannot be changed