Для решения указанных проблем можно использовать следующий подход:
1. Создайте функцию для добавления изображений:
```javascript
function addImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var preview = document.createElement("img");
preview.src = e.target.result;
preview.setAttribute("class", "image-preview");
var deleteButton = document.createElement("button");
deleteButton.innerText = "Delete";
deleteButton.addEventListener("click", function() {
preview.remove();
input.value = "";
});
document.getElementById("image-preview-container").appendChild(preview);
document.getElementById("image-preview-container").appendChild(deleteButton);
}
reader.readAsDataURL(input.files[0]);
}
}
```
2. Измените функцию удаления изображений, чтобы она правильно удаляла соответствующие изображения и сохраняла их индексы:
```javascript
function deleteImage(index) {
var preview = document.getElementById("image-preview-container");
var images = preview.getElementsByClassName("image-preview");
if (images.length > index) {
images[index].remove();
}
var buttons = preview.getElementsByTagName("button");
if (buttons.length > index) {
buttons[index].remove();
}
}
```
3. При каждом добавлении нового изображения вызывайте функцию `addImage(input)`, передавая ей элемент `input` с добавленным файлом. Также, добавьте кнопку для удаления каждого изображения с вызовом функции `deleteImage(index)` с соответствующим индексом.
Этот подход позволит сохранять изображения не только в блоке предварительного просмотра, но и в действительности, сохраняя файлы в поле ввода. Теперь при удалении изображения не нужно пересчитывать индексы, так как кнопки удаления имеют соответствующие функции.