Как сделать & quot; Если класс div равен 0, тогда начните с 1, чтобы добавить & quot;

Я пытаюсь сделать несколько загрузок изображений через ajax с XMLHttpRequest. Все хорошо. Изображения размещаются успешно, и данные возвращаются, как ожидалось. Таким образом, возвращаемые изображения добавляются в связанный класс div. Но каждый раз, когда я загружаю изображения по одному, класс div начинается с нуля.

С помощью этого кода, прежде чем отправлять файл (ы), я создаю div прогрессбара, после того, как каждое изображение успешно загружено, изображение заменяется на загрузчик.

for (var i = 0; i < input.files.length; i++) {
var fileId = i;
$('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' +
'<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
'</div>');
}

С помощью этой функции, независимо от количества файлов, я загружаю их:

for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically
var fileId = i

$('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' +
'<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
'</div>');

}

function uploadSingleFile(file, i) {

var fileId = i;
var ajax = new XMLHttpRequest();
//Progress Listener
ajax.upload.onprogress = function (e) {
var percent = (e.loaded / e.total) * 100;
$('#progressbar_' + fileId).animate({"width": percent + "%"},800);
};

//Load Listener
ajax.onreadystatechange = function (e) {
if (this.readyState == 4 && this.status == 200) {
var data = ajax.responseText;
var rep = JSON.parse(data);

$('#progressbar_' + fileId).css("width", "100%");
setTimeout(function(){
$('#progressbar_' + fileId).remove();
$('.uploaded_photo_grid.'+ fileId).html('');
$.each(file, function(){

if(rep.error !== ''){
$(".uploaded_photo_grid."+ fileId ).html(rep.name + ' yüklenemedi');
} else {
$(".uploaded_photo_grid."+ fileId ).html(
'<img class="previewItem" src="'+rep.fcontent+'" id="img_'+rep.id+'">');
}

});
},1500);
}
};

Rest of code...
}

Также я попытался редактировать эти строки кода. Это увеличивает значение div для каждого файла, но появляется только первое изображение.

var zero = $('.uploaded_photo_grid.0').length;
for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically
var fileId;
if(zero == 0){
uploadSingleFile(this.files[i], i);
console.log(this.files[i]);
fileId = i;
} else {
uploadSingleFile(this.files[i+1], i+1);
fileId = i+1;
console.log(this.files[i]);
}

$('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' +
'<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
'</div>');

}

Что я должен делать? Есть ли способ сделать это лучше? Я имею в виду загружать изображения без формы через XML с прогрессбаром для каждого файла. Я не хочу использовать плагин, это не для меня.