Как правильно обратиться к определенному элементу в массиве?

Question

[jugger1]

Данный код действует только на первый объект в массиве.Как сделать так ,что бы он срабатывал на активном объекте?

let input = document.getElementById('callback_phone');
    input.oninput = function() {
        let value = input.value;
        let flag = document.getElementsByClassName('validate_flag');
        let label = document.getElementsByClassName('callback_phone_label');
        console.log(flag);
        if(value.length === 18) {
            flag[0].classList.remove('hidden');
            label[0].innerText = 'Ваш номер телефона';
        }
        else {
            flag[0].classList.add('hidden');
            label[0].innerText = 'Введите ваш номер и мы перезвоним';
        }
    };

<div class="callback-form-block">
                            <label class="callback_phone_label" for="callback_phone">Введите ваш номер и мы перезвоним</label>
                            <input id="callback_phone" type="tel" placeholder="+7" name="phone" value="+7">
                            <span class="hidden validate_flag"> done </span>
</div>
<div class="callback-form-block">
                            <label class="callback_phone_label" for="callback_phone">Введите ваш номер и мы перезвоним</label>
                            <input id="callback_phone" type="tel" placeholder="+7" name="phone" value="+7">
                            <span class="hidden validate_flag"> done </span>
</div>
<div class="callback-form-block">
                            <label class="callback_phone_label" for="callback_phone">Введите ваш номер и мы перезвоним</label>
                            <input id="callback_phone" type="tel" placeholder="+7" name="phone" value="+7">
                            <span class="hidden validate_flag"> done </span>
</div>

Answer 1

[Inzeneries]

document.querySelectorAll('.callback-form-block').forEach(div => {
 let input = div.querySelector('input');
 input.oninput = function() {
        let value = input.value;
        let flag = div.getElementsByClassName('validate_flag');
        let label = div.getElementsByClassName('callback_phone_label');
        console.log(flag);
        if(value.length === 18) {
            flag[0].classList.remove('hidden');
            label[0].innerText = 'Ваш номер телефона';
        }
        else {
            flag[0].classList.add('hidden');
            label[0].innerText = 'Введите ваш номер и мы перезвоним';
        }
    }
})

Answer 2

[Евгений Залецкий]

Может тебе поможет