How to check if every checkbox in different tabs are checked?

I'm working on a project with Java as the backend tech, JSPs and JS with Jquery on the frontend. I'm new to JS and Jquery or at least I'm no pro so I'm trying to do my best here.

So the thing is: I have this screen I'm working on, it shows two users or more and some information related to them. Each user (and its information) is on a different tab. Each user/tab has a checkbox that MUST be checked in order to go to the next screen. So if we have two users, both checkboxes MUST be checked. If we have five, all five of them. The screen is something like this (taking in mind that the pink one is the selected user):

So the thing is, sometimes, my logic works well and I can move on to the next screen after checking all the checkboxes. But other times after refreshing the page, as I discovered using some console.log, the checkbox on the first user is executing the code for all the checkboxes while the rest of the checkboxes are not doing anything. So I can't go on to the next screen unless I check the box in all the users and the first one last. The same happens if I uncheck a checkbox on the second user, it's not doing anything because it's code is not executing.

I have a JS function on change that checks if all the checkboxes are checked in order to show the arrow to the next screen. It's like this:

        $("#demPricesCheckbox").change(function() {
            var checkboxes = document.querySelectorAll("[id='demPricesCheckbox']");
            var show = true;
            for(var i = 0; i < checkboxes.length && show; i++){
                if(!checkboxes[i].checked)
                    show = false;
            }
            if(show){
                ContractPrices.showForwardButton();
            }else{
                ContractPrices.hideForwardButton();
            }
        });

And my checkbox html is this one:

            <label class="sub-checkbox"
                style="margin-left: 100px; margin-top: 5px;"> <input
                type="checkbox" id="demPricesCheckbox" name="demPricesCheckbox" value="1"/>
                <branches:message
                    code="NAME_OF_CHECKBOX" />
            </label>

Any hints? I would appreciate any ideas or explanations on why this could be happening. If you need more info just ask me. I think it could be because of accessing the checkboxes by id and not by...class or something like that, but I don't see why this would be a problem only sometimes.

Thank you for your time! And pardon my bad English!