How to use a variable inside FileReader.onload() in jquery

Question

I have jquery function that shows the image preview before uploading. But whenever I want to use a variable within the onload() it is not working properly. I want to pass variable i inside data-imgcount="" in this particular onload(). It comes same for every image preview that I upload.

$("#fileUpload").on('change', function () {
  $(".img-preview").remove();
  $("#form-observation[type='hidden']").remove();
  //Get count of selected files
  var countFiles = $(this)[0].files.length;
  var allGood = true;
  var mainHolder = $("#img-holder");

  for (var i = 0; i < countFiles; i++) {
    var imgPath = $(this)[0].files[i].name;
    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
    var image_holder_name = "img-preview-" + i;
    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg" || extn == "mp4") {
      if (typeof (FileReader) != "undefined") {
        var image_holder = $("#img-preview-" + i);
        if (extn == "mp4") {
          var reader = new FileReader();
          reader.onload = function (e) {
            mainHolder.append(`<div class="img-preview">
                                    <video class="thumb-image" controls>
                                      <source src="${e.target.result}" type="video/mp4">
                                    </video>
                                    <span class="img-remove">x</span>
                                    <a class="img-edit" href="#!" data-imgcount="" data-image="${e.target.result}" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil"></i></a>
                                  </div>`);
          }
        } else {
          var reader = new FileReader();
          reader.onload = function (e) {

            mainHolder.append(`<div class="img-preview"><img class="thumb-image" src="${e.target.result}"><span class="img-remove">x</span><a class="img-edit" href="#!" data-imgcount="" data-image="${e.target.result}" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil"></i></a></div>`);
          }
        }

        reader.readAsDataURL($(this)[0].files[i]);
      }
    } else {
      allGood = false;
      break;
      alert("This browser does not support FileReader.");
    }
  }

  if (!allGood) {
    alert("Pls select only images and videos");
  }
});