Загрузить несколько входных файлов в разные формы

Question

Я пытаюсь создать приложение с Electron, соединяющим интерфейс html / css / js с несколькими скриптами Python.Существует четыре сценария (только один из них представлен в передней части, как показано на фотографии ниже), причем каждый сценарий состоит из двух отдельных файлов (один в качестве места ввода и один в качестве места сохранения).Каждый сценарий содержится в своей собственной форме.Я новичок в веб-разработке и хотел, чтобы выбор файлового ввода выглядел немного выше базового.Для этого потребовалось немного JS.

JS берет выбранные данные при поиске файла и добавляет его в секцию span, чтобы пользователь мог видеть, что они ввели.

Моя проблема в том, что фрагмент кода я являюсьиспользование только предполагает, что будет один возможный ввод файла, а не несколько, поэтому я не могу повторно использовать одни и те же имена классов для вызова и использования в сценарии JS.

Есть ли способ изменить сценарий JS для соответствия этим требованиям или альтернативным решениям?Любая помощь приветствуется.

Соответствующий код HTML:

<!-- This is where the main input sections will go -->
    <div class = "outer-input-container">
        <!-- Form for Camera Calibration python Script -->
            <form class = "mission-select" id = "CameraCalibration">
                <!-- Title Section -->
                <div class = "individual-input-container-1">
                    <h4>Camera Calibration</h4>
                </div>  
                <!-- File Input Section -->
                <div class = "individual-input-container-2">
                    <div class="input-container">
                      <input type="file" id="real-input">
                      <button class="browse-btn">
                        Browse Files
                      </button>
                      <span class="file-info">File</span>
                    </div>
                    <br>
                    <div class="input-container">
                      <input type="file" id="real-input">
                      <button class="browse-btn">
                        Browse Files
                      </button>
                      <span class="file-info">Save Location</span>
                    </div>
                </div>
                <!-- Other Parameter Input and Create section -->
                <div class = "individual-input-container-3">
                    <div class = "tier-heights">
                        <input class = "height-tier-input" type = "text" placeholder = "Height Tier 2">
                        <input class = "height-tier-input" type = "text" placeholder = "Height Tier 3">
                    </div>
                    <div class = "create-container">
                        <input class = "create-bttn" type="submit" value="Create">
                    </div>

                </div>
            </form>
    </div>

Код JS:

<script>
    const uploadButton = document.querySelector('.browse-btn');
    const fileInfo = document.querySelector('.file-info');
    const realInput = document.getElementById('real-input');
    uploadButton.addEventListener('click', () => {
        realInput.click();
        });
    realInput.addEventListener('change', () => {
    const name = realInput.value.split(/\\|\//).pop();
    const truncated = name.length > 50 
    ? name.substr(name.length - 10) 
    : name;

  fileInfo.innerHTML = truncated;
});

</script>