Пытаюсь изменить стиль элементов при нажатии на другой элемент, который включает input
Суть в том что есть например 2 элемента(дива), которые относятся к input, чтоб можно было добавить файл и при нажатии и добавлении фала должна появиться галка(картинка), если элемент не выбран галочка не появляется. Получилось сделать только, чтоб галочка отображалась на всех элементах, либо галочка отображается при повторном нажатии на элемент - что-то не так с последовательностью событий(( Код прилагаю
<div class="card__images">
<label for="file-input" >
<div id="scan" class="card__image" style="margin-right: 12px">
<img class="card__round" src="./images/round.png" alt="round" />
<div class="card__plus"></div>
<div class="card__items">
<img class="card__num" src="./images/1.png" alt="1" />
<img class="card__check" src="./images/chek.png" alt="chek" />
</div>
</div>
</label>
<label for="file-input" >
<div id="scan" class="card__image">
<img class="card__round" src="./images/round.png" alt="round" />
<div class="card__plus"></div>
<div class="card__items">
<img class="card__num" src="./images/2.png" alt="2" />
<img class="card__check" src="./images/chek.png" alt="chek" />
</div>
</div>
</label>
<input id="file-input" type="file" onchange="kek()" />
</div>
**JS
const scan = document.querySelectorAll("#scan");
const plus = document.querySelectorAll(".card__plus");
const check = document.querySelectorAll(".card__check");
const items = document.querySelectorAll(".card__items");
function kek() {
let l = document.getElementById("file-input");
if (document.getElementById("file-input").value != "") {
add();
console.log('lol1');
} else { remove();
console.log('lol2'); }
}
function add() {
scan.forEach((elem, i) => {
elem.addEventListener("click", () => {
console.log('lol3');
plus.forEach((elem, y) => {
if (i == y) {
elem.classList.add("card__pen");
}
});
check.forEach((elem, y) => {
if (i == y) {
elem.classList.add("card__check_active");
}
});
items.forEach((elem, y) => {
if (i == y) {
elem.classList.add("card__items_active");
}
});
});
});}
function remove() {scan.forEach((elem, i) => {
elem.addEventListener("click", () => {
console.log('lol4');
plus.forEach((elem, y) => {
if (i == y) {
elem.classList.remove("card__pen");
}
});
check.forEach((elem, y) => {
if (i == y) {
elem.classList.remove("card__check_active");
}
});
items.forEach((elem, y) => {
if (i == y) {
elem.classList.remove("card__items_active");
}
});
});
});}