incorrect substitution of dynamic argument into function

Question

I have a problem with my code

There is a code of cycle

    var myslides = document.getElementById("slider-list");
    for (let i = 0; i < arr.length; i++) {
     id[i] = arr[i].id;
     pathToStudents[i] = `img/${arr[i].avatar}`;
     fio[i] = arr[i].fio;
     let slidediv = document.createElement("li");
     slidediv.className = "slider-element";
     slidediv.innerHTML = `<img src="${pathToStudents[i]}" alt="${fio[i]}" 
     onClick="OpenCase(${id[i]});">`;
     let sliderp = document.createElement("p");
     sliderp.className = "pSlides";
     sliderp.innerHTML = `<a href="" class="aSlides">${fio[i]}</a>`;

     myslides.appendChild(slidediv);
     slidediv.appendChild(sliderp);
    };

The Dom-elements, which creates are:

    <li class="slider-element" style="opacity: 0;"><img src="img/x36.jpg" alt="Oblak Y.B." onclick="OpenCase(36);"><p class="pSlides"><a href="" class="aSlides">Oblak Y.B.</a></p></li>

    <li class="slider-element" style="opacity: 0;"><img src="img/anotertkach.jpg" alt="Tkach I.L." Onclick="OpenCase(37);"><p class="pSlides"><a href="" class="aSlides">Tkach I.L.</a></p></li>

.... etc.

Function OpenCase has the next form:

    function OpenCase(id) {       
     $.ajax({
     type: "post",
     dataType: "json",
     url: "php/getter.php",
     data: {
      mode: "spec"
     },
     success: function (spec) {
      $.ajax({
       url: "php/getter.php",
       type: 'post',
       dataType: "json",
       data: {
        mode: "student",
        id: id
       },
       success: function (result) {
        ...

Despite the fact that the DOM elements are created with different values of the argument of the function OpenCase, it always produces the same result with the last i = arr.length-1.

If you manually substitute the argument value for the foo function in the DOM element, then it works without problems.

With what it can be connected? Can anybody help?

I will be very grateful for your help!

arr = [{
  id: 1,
  fio: 1,
  avatar: 'x'
}, {
  id: 2,
  fio: 2,
  avatar: 'y'
}]
id = []
fio = []
pathToStudents = []

var myslides = document.getElementById("slider-list");
for (let i = 0; i < arr.length; i++) {
  id[i] = arr[i].id;
  pathToStudents[i] = `img/${arr[i].avatar}`;
  fio[i] = arr[i].fio;
  let slidediv = document.createElement("li");
  slidediv.className = "slider-element";
  slidediv.innerHTML = `<img src="${pathToStudents[i]}" alt="${fio[i]}" 
     onClick="OpenCase(${id[i]});">`;
  let sliderp = document.createElement("p");
  sliderp.className = "pSlides";
  sliderp.innerHTML = `<a href="" class="aSlides">${fio[i]}</a>`;

  myslides.appendChild(slidediv);
  slidediv.appendChild(sliderp);
};

function OpenCase(id) {
  $.ajax({
    type: "post",
    dataType: "json",
    url: "https://jsonplaceholder.typicode.com/posts",
    data: {
      mode: "spec"
    },
    success: function(spec) {
    console.log('succ')
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/posts",
        type: 'post',
        dataType: "json",
        data: {
          mode: "student",
          id: id
        },
        success: function(result) {
          console.log(result)
        }
      })
    }
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider-list"></div>