Как применить более одного JavaScript onchange для нескольких полей ввода загрузки изображений

У меня есть страница, на которой пользователи могут загружать до 5 изображений в свой пост. Для ясности для пользователя я сделал так, что есть 5 пустых полей с отдельными полями ввода, например:

<span id = "enableFileUpload_1" class = "upload-image-svg-wrapper">
  <input id = "imageUploadID_1" type = "file" accept = "image/*"/>
</span>
<span id = "enableFileUpload_2" class = "upload-image-svg-wrapper">
  <input id = "imageUploadID_2" type = "file" accept = "image/*"/>
</span>

Чтобы справиться с этим, у меня есть JavaScript, который ищет событие onchange в первом поле:

jQuery(function($) {
    var imageNumber = 1;
    $('body').on('change', '#imageUploadID_'+imageNumber, function() {
        $this = $(this);
        file_data = $(this).prop('files')[0];
        form_data = new FormData();
        form_data.append('file', file_data);
        form_data.append('action', 'file_upload');
        form_data.append('security', blog.security);

        $.ajax({
            url: blog.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                alert("ok");
            }
        });
    });
});

Это отлично работает для первого изображения, но кажется, что imageNumber всегда равно 1, поэтому событие onchange срабатывает только для первого изображения/ввода и ничего не делает для остальных.

Вопросы

1. Мне нужно написать 5 разных $('body').on('change', '#imageUploadID_1', function() для каждого поля ввода, а затем заставить их вызывать одну и ту же функцию?
2. Есть ли более разумный способ сделать это?