Пошаговая загрузка файлов в форму

Нужно реализовать загрузку фотоальбома на сервер через форму. Проблема возникла тогда, когда встал вопрос о том, как реализовать загрузку файлов в добавок к имеющимся. То есть: я выбрал 5 файлов, они отобразились на странице в превью, а затем я захотел и загрузил еще 5. И файлы загружаются на сервер после отправки формы. Непонятно как это реализовать.

Изначально сделал один инпут:

<input type="file" id="0" name="photos[]" multiple hidden required class="photos">

и ловил его изменения:

$('input.photos').change(...)

и отдельный массив var photos = []; куда писал вновь добавленные файлы, а при отправке формы:

$('form').submit(function () {
    $('input.photos').val(photos);
}

Не помогло. Потом решил добавлять новые input'ы аналогично вышеуказанному, в момент, когда партия файлов загружена, но ставить id на единицу больше, чем предыдущий и уже вешал обработчик на новый инпут. Но нет, не сработало, onchange() уже перестаёт отлавливать новые файлы.

Как решить этот вопрос?

UPD:

Вопрос решил установлением onchange через делегированное событие. Ниже есть весь код.

Проблема появилось в другом. Как удалить одну отографию из одного input'а? Filelist только для чтения(

var ids = [0];
var photoNames = [];
var append = false;
$('span#photo-uploader').click(function (e) {
    $('input.photos#' + ids[ids.length - 1]).click();
});
$('body').on('change', 'input.photos', function () {
    var input = this;
    var photoList = $('div.photo-list');
    for (var i = 0; i < input.files.length; i++) {
        var file = input.files[i];
        if (photoNames.indexOf(file.name) !== -1) continue;
        append = true;
        photoNames.push(file.name);
        var reader = new FileReader();
        reader.onloadstart = (function (file, i) {
            return function (e) {
                photoList.append(photoItem(e, file, i));
            }
        }) (file, i + photoNames.length);
        reader.onload = (function (i) {
            return function (e) {
                $('div#' + i + '.photo-item img').attr('src', e.target.result);
            }
        }) (i + photoNames.length);
        reader.onprogress = function (e) {
            if (e.lengthComputable) {
                var progress = Math.round(e.loaded / e.total * 100);
                $('div#' + i + '.photo-item div.progress-bar').css('width', progress + '%');
            }
        };
        reader.readAsDataURL(file);
    }
    if (append) {
        $('div.kek').append('<input type="file" id="' + (ids[ids.length - 1] + 1) + '" name="photos[]" multiple class="photos">');
        ids.push(ids[ids.length - 1] + 1);
        append = false;
    }
});
function photoItem(e, file, i) {
    return ''; // рендерит фотку
}