Почему скрипт работает только на первый элемент?

Question

[Rem36]

Здрасти. я нуб. пытаюсь сделать скрипт который меняет меняет класс при фокусе. Скрипт работает только на первый элемент, на последующие не работает и с первого не удаляет класс? Подскажите пжл в чем тут проблема?

.section__editions-checkbox - кустомный чекбокс
.label-checkbox-editions - label чекбокса

window.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.section__editions-checkbox').forEach(function(arr1){
        arr1.addEventListener('focus', function(event){
            const path = event.currentTarget.dataset.path

            document.querySelectorAll('.label-checkbox-editions').forEach(function(arr2){
                arr2.classList.remove('focus-label')
            })
            document.querySelector('.label-checkbox-editions').classList.add('focus-label')
        })
    })
})

Comments

[Ankhena]

Именно при фокусе?
Зачем для этого JS, когда есть :focus, :focus-with-in и в некоторой степени :focus-visible?

[Илья]

Потому что document.querySelector('.label-checkbox-editions').classList.add('focus-label') находит первый элемент с подходящим классом

window.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.section__editions-checkbox').forEach(function(arr1){
        arr1.addEventListener('focus', function(event){
            document.querySelectorAll('.label-checkbox-editions').forEach(function(arr2){
                arr2.classList.remove('focus-label')
            })
            document.querySelector(`[for="${event.target.id}"]`).classList.add('focus-label')
        })
    })
})

input и label должны быть связаны через id и for

[Rem36]

Илья, Спасибо!

[Rem36]

Ankhena, Спасибо

[Stalker_RED]

Илья, не обязательно связывать. Если input вложен в label, то свяжутся автоматически.
Интуты доступны из лейбла как label.control
а при помощи input.labels можно получить все label (их может быть несколько).