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

Под кнопкой пишется число прикрепленных файлов. но добавляются только последние файлы. На примере, сначала добавили 5 файлов, затем 3 файла. Сейчас выводит обе записи, а на почту отправляются последние 3 файла. Хочу написать/доправить скрипт так, чтобы на сайте показывалось количество последних прикрепленных файлов.
Заранее благодарю!
<div class="col-xs-12">
<button class="btn btn-link btn-file btn-sm upload" type="button">
Прикрепить файл
<input type="file" id="input-file" multiple name="mail_file[]" >
</button>
<ul id="output" class="list-group"></ul>
</div>
<div id="output2"></div>
function fileSize(size) {
var i = Math.floor( Math.log(size) / Math.log(1024) );
return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
};
var inputFile = document.getElementById('input-file');
inputFile.addEventListener('change', inputHandler, false);
function inputHandler() {
document.getElementById('output').innerHTML = '';
var element = document.getElementById(this.id),
result = element.files;
for (var x = 0; x < result.length; x++) {
var file = result[x],
li = document.createElement("li");
li.className = "list-group-item";
li.innerHTML = "<strong>Имя Файла: </strong>" + file.name + "<br ><strong>Тип Файла: </strong> " + file.type + "<br ><strong>Размер Файла: </strong>" + fileSize(file.size);
document.getElementById('output').appendChild(li);
}
li.innerHTML = "Число Файлов:" + result.length;
document.getElementById('output2').appendChild(li);
}