Select option presets messing up after manual select

I have a list of permissions in a <select> element, and three radio buttons to select presets, instead of seelcting permissions manually.

I use the same trigger function for all four elements, and the radio buttons work beautifully until you select something manually, and then they scre up completely.

I assume that it is my XOR if(selectItems.includes(option.value) ^ invert) ... that is clogging up the works, but when I do step-through debugging, it looks correct, but the result is not the expected one...

document.getElementById('userTypeAdminInhouse').addEventListener('change', selectScope);
document.getElementById('userTypeAdminClient').addEventListener('change', selectScope);
document.getElementById('userTypeUser').addEventListener('change', selectScope);
document.getElementById('scope').addEventListener('change', selectScope);

function selectScope(e) {
    let scopeSelect = document.getElementById('scope');
    let selectItems = [];
    let invert = false;
    if (e.target.id == 'userTypeUser') {
        //only this one permission
        selectItems = ['user:self']
    } else if (e.target.id == 'userTypeAdminClient') {
        selectItems = ['user:read', 'admin:read', 'stats:read']
    } else if (e.target.id == 'userTypeAdminInhouse') {
        invert = true;
        //all permissions except this one
        selectItems = ['user:self']
    } else if (e.target.id == 'scope') {
        document.getElementById('userTypeUser').checked = false;
        document.getElementById('userTypeAdminClient').checked = false;
        document.getElementById('userTypeAdminInhouse').checked = false;
    }
    if (selectItems.length > 0) {
        for (const option of document.querySelectorAll('#scope option')) {
            /* If option value contained in values, set selected attribute */
            if (selectItems.includes(option.value) ^ invert) {
                option.setAttribute('selected', 'selected');
            }
            /* Otherwise ensure no selected attribute on option */
            else {
                option.removeAttribute('selected');
            }
        }
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control" size="10" id="scope" name="scope[]" multiple required>
    <option title="Read list of admin users/all projects" value="admin:read">admin:read | Read list
        of admin users/all projects</option>
    <option title="Create admin users" value="admin:write">admin:write | Create admin users</option>
    <option title="Read client details" value="client:read">client:read | Read client details</option>
    <option title="Edit/Create client" value="client:write">client:write | Edit/Create client</option>
    <option title="Read project" value="project:read">project:read | Read project</option>
    <option title="Create/Edit project" value="project:write">project:write | Create/Edit project
    </option>
    <option title="Read User details" value="user:read">user:read | Read
        User details</option>
    <option title="User. Cannot log in to admin parts" value="user:self">user:self | User.
        Cannot log in to admin parts</option>
    <option title="Create/edit Users" value="user:write">user:write | Create/edit
        Users</option>
    <option title="Read statistics" value="stats:read">stats:read | Read statistics</option>
    <option title="Read story list" value="story:read">story:read | Read story list</option>
</select>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="userType" id="userTypeAdminInhouse">
        <label class="form-check-label" for="userTypeAdminInhouse">
            Admin User (inhouse)
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="userType" id="userTypeAdminClient">
        <label class="form-check-label" for="userTypeAdminClient">
            Admin User (client)
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="userType" id="userTypeUser">
        <label class="form-check-label" for="userTypeUser">
            User
        </label>
    </div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/D6vj1WE