Styling multiple DOM elements that share the same class name but only style the specific element that triggered the event?

I made a to-do list web app that creates list cards with their own related tasks. I made it so when you add a task to your specified list card it appends it to your list card along with a 'task checkbox' and a 'delete task button'.
This is an image of the checkbox being checked and not applying the specified style to each associated task.

I got the delete task button to work on each individual task but can't seem to get the event binding to work correctly on the checkbox. It works on all cards but only when there is only one task to "check off", once you add another task it only works on the most recent task just added and stops working on all previous tasks?

I have tried using event.target as a condition within the if statement and within its code block so that it could only run the code block on the "specific" checkbox not just "any" checkbox if that makes sense. I also thought there might be an issue with event delegation since the event listener is set on the 'check' variable instead of a node higher up on the DOM tree that could listen for all click events but when I do that it stops working altogether.

It appears that the event is firing correctly but that it might be the task variable within the if/else conditional statement that is not applying the text-decoration properly?

add_task.addEventListener('click', function () {


                // Checks to see if there was no input
                if (input_task.value === '') {
                    alert('Please enter a task.');
                }

                // Checks to see if the input is only WHITESPACE
                else if (input_task.value.match(/^\s*$/)) {
                    // Clears '.input-task' input field
                    input_task.value = '';
                    alert('WHITESPACE-ONLY is not allowed.');
                } 

                else if (task_list.childElementCount <= 7) {

                    // Creates '.task_container' div element
                    task_container = document.createElement('div');
                    task_container.className = 'task-container';
                    task_list.appendChild(task_container);

                    // Creates '.task-wrapper' div element
                    task_wrapper = document.createElement('div');
                    task_wrapper.className = 'task-wrapper';
                    task_container.appendChild(task_wrapper);

                    // Creates '.task' li element
                    task = document.createElement('li');
                    task.className = 'task';
                    task.textContent = input_task.value;
                    input_task.value = '';
                    task_wrapper.appendChild(task);

                    option_wrapper = document.createElement('div');
                    option_wrapper.className = 'option-wrapper';
                    task_container.appendChild(option_wrapper);

                    // Creates 'check' input(checkbox) element
                    check = document.createElement('input');
                    check.type = 'checkbox';
                    check.name = 'check';
                    check.className = 'check';
                    option_wrapper.appendChild(check);

                    check.addEventListener('click', checkBox);

                    function checkBox (event) {
                        if (event.target.className === 'check' ) {

                            var isChecked = check.checked;
                            if (isChecked) {
                                // event.target.value = 'complete';
                                task.style.textDecoration = 'line-through';
                                task.style.textDecorationColor = 'tomato';
                            } else {
                                // event.target.value='incomplete';
                                task.style.textDecoration = 'none';
                            }

                        }
                    }


                    // Creates 'trash' button element
                    trash = document.createElement('button');
                    trash.className = 'trash';
                    trash.textContent = 'Delete';
                    option_wrapper.appendChild(trash);

                    trash.addEventListener('click', function () {
                        event.target.closest('.task-container').remove();
                    });

                }

I expect to check & uncheck the checkbox for a given task and it applies the text-decoration: line-through or text-decoration: none to its associated task element. However, as I mentioned before, that doesn't seem to apply when there are multiple tasks within the list. It only works on the most recent appended task?