Как получить индекс l oop внутри функции события progress для xhr, который находится в al oop?

Question

Я пытаюсь сделать индикаторы выполнения для загрузки нескольких файлов с Ajax. В своей форме я использую вход FileType с атрибутом множественного числа. Мне удалось загрузить , работающий , используя al oop в массиве файлов (см. Javascrip ниже). То, что я хочу сделать, это иметь индивидуальный индикатор выполнения для каждого xhr. Таким образом, я поместил bootstrap html для бара в l oop, добавив новый бар в каждом проходе в l oop и присвоив индикатору прогресса идентификатор, основанный на индексе l oop. Теперь я просто хочу получить доступ к этому индикатору прогресса по его обратному вызову. Я не могу найти, как это сделать.

Вот мой javascript.

$(document).ready(function() {

    $('.custom-file input').change(function(e) {
        //write the selected file names in the #custom-file-name div
        var files = [];
        for (var i = 0; i < $(this)[0].files.length; i++) {
            files.push($(this)[0].files[i].name);
        }

        $('.custom-file-label').html(files.join(', '));
    });


    $(document).on('click', '#upload_submit', function(event) {
        console.clear();
        event.preventDefault();

        var $champ = $('.custom-file-input');
        var fichiers = $champ[0].files;
        // Read selected files

        var totalfiles = $champ[0].files.length;
        console.log(totalfiles);

        for (var index = 0; index < totalfiles; index++) {
            var form_data = new FormData();
            form_data.append("photos[]", fichiers[index]);
            $("#preview").append("<div  class='progress'><div id='pb" + index + "' class='progress-bar' role='progressbar' style='width: 0%' aria-valuenow ='0' aria-valuemin = '0' aria-valuemax = '100'></div> </div><br/>")

            // AJAX request
            $.ajax({
                xhr: function() {
                    xhr = new window.XMLHttpRequest();
                    console.log('index is ' + index);
                    xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            console.log('Bytes loaded: ' + e.loaded);
                            console.log('Total size: ' + e.total);
                            console.log('Percentage: ' + (e.loaded / e.total));
                            var percent = Math.round((e.loaded / e.total) * 100);
                            //THIS IS THE PROBLEM TO SOLVE index is undefined
                            $('#pb' + index).attr('aria-valuenow', percent).css('width', percent + "%");

                        }
                    });
                    return xhr;

                },
                url: '/upload',
                type: 'post',
                data: form_data,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function(response) {
                    //alert(response);
                    for (var index = 0; index < response.length; index++) {
                        var src = response[index]; 
                        // Add img element in <div id='preview'>
                        $('#preview').append('<img src="' + src + '" width="200px;" height="150px">');
                    }; 
                }     
            }); //end ajax
        }  
    });
});