Use selected element when selector allow for multiple options

Sorry if my title is difficult to understand.

I've multiple fields named date1, date2... On Change of those fields, I want a full script to run. Today, I have simply copied the code for each dateN I have.

I would like to have a cleaner code and use the next JQuery selector:

$("input[id^=date]")

The problem I face is that I don't know how to reuse the selected element into the subsequent code. I've tried with $(this) but it doesn't work, as it seems to be undefined.

Edit: as requested I show an example with $(this). The variable day stays empty. It works if I use the same selector as for month and year. The full example doesn't use $(this) yet but it's to show that my $(this) doesn't work.

$("#date1").on("change", () => {
      // Check validity of the date
      const regexDate = /\d{2}\/\d{2}\/\d{4}/gm;
      if (regexDate.test($("#date1").val()) == false) {
        // Date format not valid, we quit the function
        $("#info1").removeAttr("title");
        $("#info1").hide();
        return;
      }

      //Slice date
      var day = $(this).val().substring(0, 2);
      var month = $("#date1").val().substring(3, 5);
      var year = $("#date1").val().substring(6, 10);

      $.get("http://192.168.1.6:3000/getDateHistory/" + day + "/" + month + "/" + year, (data) => {
        data = JSON.parse(data);
        // Only display if not empty
        if (data.length > 0) {
          historyOfSameDate = "Other records exist at the same date: ";
          for (var i = 0; i < data.length; i++) {
            historyOfSameDate += data[i].desc + " - " + data[i].amount;
            if (i < data.length - 1) {
              historyOfSameDate += " | "
            };
          }
          $("#info1").attr({
            "title": historyOfSameDate
          });
          $("#info1").show();
        } else {
          $("#info1").removeAttr("title");
          $("#info1").hide();

        }
      });

<tr>
  <td><input class="form-control datepicker" id="date1" placeholder="Enter date"></td>
  <td style="vertical-align:middle;"><i id="info1" class="bi bi-info-square-fill"></i></td>
  <td>
    <select class="form-control" id="type1" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td><input class="form-control" id="desc1" placeholder="Enter description"></td>
  <td><input class="form-control" id="amount1" placeholder="Enter amount"></td>
  <td>
    <select class="form-control" id="payer1" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td>
    <select class="form-control" id="paymentsource1" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td style="vertical-align:middle; color:orange;"><i id="warning1" class="bi bi-exclamation-triangle-fill" title="This record will be ignored because it either doesn't contain enough information or contains error(s)."></i></td>
</tr>
<tr>
  <td><input class="form-control datepicker" id="date2" placeholder="Enter date"></td>
  <td style="vertical-align:middle;"><i id="info2" class="bi bi-info-square-fill"></i></td>
  <td>
    <select class="form-control" id="type2" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td><input class="form-control" id="desc2" placeholder="Enter description"></td>
  <td><input class="form-control" id="amount2" placeholder="Enter amount"></td>
  <td>
    <select class="form-control" id="payer2" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td>
    <select class="form-control" id="paymentsource2" placeholder="Enter type">
      <option value=""></option>
    </select>
  </td>
  <!-- Options dynamically created -->
  <td>

Thank you

from Use selected element when selector allow for multiple options