I'm creating a sorting program for DnD spells that sorts all 318 spells into 83 different categories. I have multiple arrays storing all of the information, and I know how to check if an element has a class from an array.

However, I want to sort the spells based on multiple tags at once, for example, selecting the Druid tag and the Level 9 tag would show only spells with those tags, but then deselecting Level 9 would show all of the Druid spells. The amount of tags chosen can go up or down consistently, and what I'm essentially looking for is something that can take all of the tags that are selected (pushed into an array) and check if all of those tags are classes in each div element, showing only the elements that contain all of the classes in the tag selection array. As it stands now, I've only been able to achieve it checking for the first tag I select, and then everything goes blank after I select a second class.

Here is what I've tried:

var selections = [];

function showCards(e) {
    $(".spellCards > img").hide();
    selections.push(classes[e]);
    
    for(var i = 0; i < 318; i++) {


    // I'm putting all of my attempts here at once, they weren't run at the same time.
        if(spellCard[i].classList.contains(selections)) {
            $(spellCard[i]).show();
        }

        if(spellCard[i].classList.matches(selections)) {
            $(spellCard[i]).show();
        )

        if(spellCard[i].classList.contains.every(selection)) { // First tag works
            $(spellCard[i]).show();
        )

        if(selection.every(c=>spellCard[i].classList.contains(c))) {
            $(spellCard[i]).show();
        )

        if(spellCard[i].classList.contains(classes[e])) {
            $(spellCard[i]).show();
        }  
    }
}