Клонированные динамические поля в файловом менеджере сохраняют предыдущее состояние изображения: как предотвратить дублирование изображений?

Контекст: Я пытаюсь создать функцию, которая обрабатывает несколько сообщений и медиа/файлы, используя файловый менеджер. Проблема в том, что хотя часть с сообщениями работает, секция медиа/файлов считывает только один файл, даже после добавления кода для обработки нескольких файлов.

Код

<div class="accordion-item">
                <h2 class="accordion-header" id="headingTextMedia">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTextMedia" aria-expanded="false" aria-controls="collapseTextMedia">
                        <?php _e("Текст & Медиа")?>
                    </button>
                </h2>
                <div id="collapseTextMedia" class="accordion-collapse collapse" aria-labelledby="headingTextMedia" data-bs-parent="#campaignAccordion">
                    <div class="accordion-body">

                        <label for="type_text_media" class="nav-link bg-active-primary text-gray-700 px-4 py-3 b-r-6 text-active-white <?php _ec( (get_data($result, "type") == 1 || get_data($result, "type") == "")?"active":"" ) ?> hidden-element" data-bs-toggle="pill" data-bs-target="#wa_text_and_media" type="button" role="tab"><?php _e("Тест")?></label>
                        <input class="d-none hidden-element" type="radio" name="type" id="type_text_media" <?php _ec( (get_data($result, "type") == 1 || get_data($result, "type") == "")?"checked='true'":"" ) ?> value="1">
                            <div class="d-flex justify-content-start mb-3">
                                <button type="button" class="btn btn-primary me-2" id="add-text-media">
                                    <?php _e("Добавить Текст & Медиа")?>
                                </button>
                                <button type="button" class="btn btn-primary" id="add-more-text">
                                    <?php _e("Добавить Дополнительный Текст")?>
                                </button>
                            </div>

                            <div id="dynamic-fields-container">
                                <div class="dynamic-field">
                                    <?php echo view_cell('\Core\Whatsapp\Controllers\Whatsapp::widget_content', ["result" => $result]) ?>
                                    <label class="form-label"><?php _e("Текстовое Сообщение / Подпись")?></label>
                                    <?php echo view_cell('\Core\Caption\Controllers\Caption::block', ['name' => 'caption[]', 'value' => get_data($result, "caption")]) ?>
                                    <p class="fs-12 text-danger mb-1">
                                        <span class="paramsDiv"></span>
                                    </p>
                                    <ul class="text-gray-400 fs-12">
                                        <li><?php _e("Случайное сообщение по Spintax")?></li>
                                        <li><?php _e("Например: {Привет|Здравствуйте|Х Hola}")?></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="mt-3">
                                <label class="form-label"><?php _e("Отправить Тестовое Сообщение")?></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="<?php _e("Номер Тестового Получателя")?>" id="test-recipient-number">
                                    <button class="btn btn-primary" type="button" id="send-test-message"><?php _e("Отправить")?></button>
                                </div>
                                <small class="form-text text-muted"><?php _e("Номер WhatsApp для получения тестового сообщения (включая код страны).")?></small>
                            </div>
                        </div>
                    </div>
            </div>

            <script>
            $(document).ready(function() {
                $('#add-text-media').on('click', function() {
                    const newField = $('.dynamic-field:first').clone(true);
                    newField.find('textarea').val('');
                    newField.find('.emojionearea-editor').text('');
                    addRemoveButton(newField);
                    $('#dynamic-fields-container').append(newField);
                    updateRemoveButtons();
                });

                $('#add-more-text').on('click', function() {
                    const newField = $('.dynamic-field:first').clone(true);
                    newField.find('.fm-selected-media').remove();
                    newField.find('.btnOpenFileManager').remove();
                    newField.find('textarea').val('');
                    newField.find('.emojionearea-editor').text('');
                    addRemoveButton(newField);
                    $('#dynamic-fields-container').append(newField);
                    updateRemoveButtons();
                });

                function addRemoveButton(field) {
                    const removeButton = $('<button type="button" class="btn btn-danger btn-hover-scale remove-field mt-2"><i class="fas fa-times"></i> <?php _e("Удалить") ?></button>');
                    field.append(removeButton);
                }

                $(document).on('click', '.remove-field', function() {
                    $(this).closest('.dynamic-field').remove();
                    updateRemoveButtons();
                });

                function updateRemoveButtons() {
                    const fields = $('.dynamic-field');
                    if (fields.length > 1) {
                        fields.find('.remove-field').show();
                    } else {
                        fields.find('.remove-field').hide();
                    }
                }

                // Первоначальный вызов для настройки кнопок удаления
                updateRemoveButtons();
            });
            </script>

Я добавил код для поддержки нескольких сообщений и медиа файлов в файловом менеджере. Часть с сообщениями работает как ожидается, позволяя отправлять несколько сообщений. Однако в секции медиа/файлов я ожидал, что она позволит загружать несколько файлов, но сейчас она считывает только первый файл, который я загружаю, даже когда я пытаюсь добавить больше.

Если вы хотите иметь одно поле ввода, позволяющее загружать несколько файлов, вам нужно установить атрибут multiple для него. Тем не менее, исходя из вашего кода, кажется, что у вас есть несколько загрузчиков файлов, и только первый файл загружается.

Если это ваша проблема, то вам нужно убедиться, что у разных полей загрузки файлов разные значения атрибута name.

Также, если вы хотите загружать файлы с помощью Javascript, прочитайте эту статью: https://imagekit.io/blog/uploading-multiple-files-using-javascript/