Change status of button when all text boxes on the current layer are not empty

Hello,

I am working on a project in which there are multiple layers with text box entries. Each layer has a button whose state needs to be changed when all text boxes on the layer are filled.

I created a javascript using document.querySelectorAll('.acc-textinput'); and addEventListener to change status of a button when all text boxes are filled.

This works when I fill the boxes on the first layer and move to the next. However, if I jump to the 2nd layer before filling all text boxes on the first layer, it doesn't work.

Some googling tells me that document.querySelectorAll('.acc-textinput') looks at text inputs from the base layer as well as other active layers.

How do I restrict the scope to the current layer only?

Here is the javascript I'm using:

const inputs = document.querySelectorAll('.acc-textinput');

        inputs.forEach(input => {
            input.addEventListener('keyup', checkInputs);
        });
        
        function checkInputs() {
            const allInputsFilled = Array.from(inputs).every(input => input.value.trim() !== '');
            
            if (allInputsFilled) {
                setVar('allAnswersEntered1', true)
            } else {
                setVar('allAnswersEntered1', false)
            }
        }

Any help will be much appreciated.