Need help on creating checkboxes that filter content of an array

I have just started learning html, javascript, and CSS and so I only understand the basics. For this class project I am working on, we have to create checkboxes that can filter out content of an array based on whether or not the strings in the array contain a certain letter. If they do contain the letter they will be removed from the array. My original array is an array called words

In my .html file i have the following:

<form> 
<label> <input type="checkbox" id="A" onchange= "exclude()" /> Exclude words with 'A' <br /> </label>
            <label> <input type="checkbox" id="I" onchange= "exclude()" /> Exclude words with 'I' <br /> </label>
            <label> <input type="checkbox" id="O" onchange= "exclude()" /> Exclude words with 'O' <br /> </label>

and in my .js file i have :

function exclude() {
    if (A.checked) {
        filterByLetter(words, "A")
    }
    if (I.checked) {
        filterByLetter(words, "I")
    }
    if (O.checked) {
        filterByLetter(words, "O")
    }
}

function filterByLetter(originalList, letter) {
    var newList = [];
    for (var i = 0; i < originalList.length; i++){
        if (originalList[i].indexOf(letter) == -1) {
            newList.push(originalList[i]);
            
        }
    }
    
    par.innerHTML = newList;
    
}

When I run this code, it works, however, when I checked multiple checkboxes, only the most recent checkbox has effect. How can I make it so that multiple checkboxes being checked at once will filter out strings with all of the letters? And how would I do this so that if I uncheck the boxes at the end, the array will not be filtered by those letters? Thanks!!!