样式更改仅针对数组的第一个元素

Question

我正在使用forEach循环在几个输入上设置事件监听器。在“更改”事件中，我想为同级元素设置动画以充当进度栏。

问题在于，无论哪个事件侦听器触发，它都会始终为第一个输入元素的同级设置样式，无论哪个输入触发了更改事件。

HTML

<div>
    <input type="file" class="upload--file" id="upload--file">
    <label for="upload--file"></label>
    <img>
    <h3></h3>
    <p></p>
    <div class='BG'></div>
</div>
<div>
    <input type="file" class="upload--file" >
    <label for="upload--file"></label>
    <img>
    <h3></h3>
    <p></p>
    <div class='BG'></div>
</div>

JS

document.querySelectorAll('.upload--file').forEach(item => {

    item.addEventListener('change', () => {

        item.parentNode.childNodes[11].style.height = '100%';

    })
})

您可以在图像中看到，我单击了第二个框，但是样式应用于第一个框内的div。