EventListener JavaScript multiple Checkbox by class name [duplicate]

I have multiple Buttons ("contact-accordion") inside a PHP for loop. Each button contains a checkbox ("checkbox"), which should change the CSS style of the button element when checked. The following code does not seem to work, why?

<input type="checkbox" class="contact-checkbox" name="test">

var acc = document.getElementsByClassName("contact-accordion");
var checkbox = document.getElementsByClassName("contact-checkbox");
    for (i = 0; i < checkbox.length; i++){
        checkbox[i].addEventListener('change', function() {
            if (this.checked) {
                acc[i].style.color = "red";
                alert("test");
            }
        });
            
    }