Inserting select all checkboxes into JS proving difficult

I have recently started helping with a live project to do with calculating values of "dimensions" containing different "enemies", "evolutions", and the rewards thereof. It already has checkboxes but they are coded differently than I have seen elsewhere, so it is proving difficult to add a select all/deselect all checkbox to each of the 4 sections. The single HTML is easy, the three JS are fighting me. However, I am not incredibly knowledgeable on coding so it may be a matter of ignorance. I am used to each box being coded separately, and these are not.
Here's a link to the live project.
Here's a link to the entire github repository if anyone's interested. Calc.js and calculator.html are the main files we're working with here.

Here's sections of the coding related to the checkboxes. Top three are in the same .js file, fourth is in the .html file.

    for (const [name, enemy] of Object.entries(enemies)) {
        if (enemy.base) {
            let evolved_enemy = enemy;
            do {
                if (evolved_enemy.evolution === undefined) {
                    break;
                }
                const evolved_name = evolved_enemy.evolution;
                evolved_enemy = enemies[evolved_enemy.evolution];
                evolutions_list.appendChild(create_evolution_checkbox(evolved_name, on_evolution_toggle));
            } while (evolved_enemy !== undefined);
            base_enemies.push(enemy);
        }
        evolved[name] = false;
    }

const create_evolution_checkbox = (name, changeCallback) => {
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.name = name.replace(/ /g, "_");
    checkbox.classList.add("bonus_checkbox");
    checkbox.addEventListener("change", changeCallback);
    const label = document.createElement("label");
    label.textContent = name;
    label.htmlFor = name;
    const container = document.createElement("li");
    container.appendChild(label);
    container.appendChild(checkbox);
    return container;
};

const on_evolution_toggle = (event) => {
    const enemy_name = event.currentTarget.name.replace(/_/g, " ");
    evolved[enemy_name] = !evolved[enemy_name];
    let enemy = find_evolution_base(enemy_name);
    //make sure all evolutions are checked that are before this
    const is_checked = evolved[enemy_name];
    let enemy_encountered = false;
    do {
        if (enemy.evolution === undefined) {
            break;
        }
        if ((is_checked && !enemy_encountered) || (!is_checked && enemy_encountered)) {
            const checkbox = document.querySelector(`input[name=${enemy.evolution.replace(/ /g, "_")}]`);
            if (checkbox !== null) {
                checkbox.checked = evolved[enemy_name];
            }
            evolved[enemy.evolution] = evolved[enemy_name];
        }
        if (enemy.evolution === enemy_name) {
            enemy_encountered = true;
        }
        enemy = enemies[enemy.evolution];
        // eslint-disable-next-line no-constant-condition
    } while (true);
    calculate_map_values();
};

        <label for="mapValueEvolutionsList">Check unlocked evolutions:</label>
        <ul id="mapValueEvolutionsList" name="mapValueEvolutionsList"></ul>

I apologize in advance as I'm sure my ignorance is showing through, but I would appreciate any help someone can provide in adding a select/deselect all checkbox to each individual section (not the whole page of checkboxes at once) that also defaults to on with click, as otherwise it won't change the values by default. This is something that will help me understand it better as well, so thank you in advance if you're willing to help.