Why, when uploading several photos, the name under the photo is the same?

Question

JavaScript

I'm uploading multiple files.

Link to example

When several files with different names are selected, for some reason the name under the picture is the same, although the names of the photos are displayed correctly in the console. Why is this happening?

Answer 1

This is what a more or less correct version would look like:

$(() => {
    const imagesPreview = (input, container) => {
        if (input.files) {
            for (const file of input.files) {
                const reader = new FileReader();
                reader.onload = e => {
                    $($.parseHTML('<img>')).attr('src', e.target.result).appendTo(container);
                    $($.parseHTML('<div>')).text(file.name).appendTo(container);
                }
                reader.readAsDataURL(file);
            }
        }

    };
    $('#gallery-photo-add').on('change', e => imagesPreview(e.currentTarget, 'div.gallery'));
});