DYNAMIC PRICE CHANGING

Hi, I have created a javascript that lets me to click images, and update checkboxes accordingly to it. I have my image divided for four parts. I have checkbox 1,2,3,4 and sections 1,2,3,4. The problem is, when I click sections on image and checkboxes are checked after that, the price don’t update. The price is updated only after I click on checkbox. For example, If I click checkbox 1, the price update and background of section 1 changes. Then I click section 1, and then checkbox 1 is unchecked, but price isn’t updating. Any ideas? Here is my code:

document.addEventListener(‘DOMContentLoaded’, (event) => {
const pictureDivs = Array.from(document.querySelectorAll(‘div.woocommerce-product-gallery__image img’));

pictureDivs.forEach(img => {
    let parent = img.parentNode;
    if (parent.tagName.toLowerCase() === 'a') {
        parent.parentNode.replaceChild(img, parent);
    }

    let overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = 0;
    overlay.style.left = 0;
    overlay.style.height = '100%';
    overlay.style.width = '100%';
    overlay.style.display = 'flex';
    overlay.style.zIndex = '2';
    img.parentNode.style.position = 'relative';
    img.parentNode.appendChild(overlay);

    for (let i = 0; i < 4; i++) {
        let section = document.createElement('div');
        section.style.width = '25%';
        section.style.height = '100%';
        section.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
        section.style.border = '1px solid white';
        section.style.boxSizing = 'border-box';
        section.style.cursor = 'pointer';

        overlay.appendChild(section);

        section.id = sekcja-${i + 1};

        section.addEventListener('click', function(event) {
            event.stopPropagation();
            section.classList.add('clicked');
            alertHandler(i + 1);
        });

        // Dodaj znacznik litery na dole sekcji
        // let letterSpan = document.createElement('span');
        // letterSpan.classList.add('section-letter');
        // letterSpan.textContent = String.fromCharCode(65 + i); // A, B, C, D
        // section.appendChild(letterSpan);
    }

    // Dodaj listener zdarzenia klikni?cia do zdj?cia
    img.addEventListener('click', function(event) {
        toggleCheckboxAndSection('xcq9p', 1);
        toggleCheckboxAndSection('ytlk0', 2);
        toggleCheckboxAndSection('zwr91', 3);
        toggleCheckboxAndSection('jad6o', 4);
    });
});

const values = ['xcq9p', 'ytlk0', 'zwr91', 'jad6o'];

const checkboxes = [];

values.forEach(value => {
    const checkbox = document.querySelector(input[value="${value}"]);
    if (checkbox) {
        checkboxes.push(checkbox);
    }
});

checkboxes.forEach((checkbox, index) => {
    checkbox.addEventListener('change', function() {
        updateSectionState(index + 1, this.checked);
    });
});

});

function updateSectionState(sectionNumber, isChecked) {
const section = document.getElementById(sekcja-${sectionNumber});
if (section) {
if (isChecked) {
section.classList.add(‘clicked’);
} else {
section.classList.remove(‘clicked’);
}
}
}

function toggleCheckboxAndSection(value, sectionNumber) {
const checkbox = document.querySelector(input[value="${value}"]);
if (checkbox) {
checkbox.checked = !checkbox.checked;
updateSectionState(sectionNumber, checkbox.checked);
}
}

function alertHandler(section) {
switch(section) {
case 1:
toggleCheckboxAndSection(‘xcq9p’, section);
break;
case 2:
toggleCheckboxAndSection(‘ytlk0’, section);
break;
case 3:
toggleCheckboxAndSection(‘zwr91’, section);
break;
case 4:
toggleCheckboxAndSection(‘jad6o’, section);
break;
}
}