How to correctly filter data shown on screen in javascript?

Question

I have filters and buttons set up for an array of data where a user clicks a button and the characters that match that button appear on the screen, but when I click a different button I have to refresh the page and click the new button again every time I want the data to appear. I want to switch it so every time a user clicks that same button only those characters that match the button show up on the screen without having to refresh the page, for the life of me I cannot get it to work correctly.

Javascript:

const mainHeader = document.querySelector('header')
//making male characters bounce on page
let maleButton = document.createElement('button')
maleButton.textContent = 'Male Characters'
maleButton.addEventListener('click', () => {
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
});

//making female characters bounce on page
let femaleButton = document.createElement('button')
femaleButton.textContent = 'Female Characters'
femaleButton.addEventListener('click', () => {
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
});

//making non gender characters bounce on page
let otherButton = document.createElement('button')
otherButton.textContent = 'Non-Gender Characters'
otherButton.addEventListener('click', () => {
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
});
//Want to add films button
let filmsButton = document.createElement('button')
filmsButton.textContent = 'Films'
filmsButton.addEventListener('click', () => {
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        matchedDiv.setAttribute("style", "display: none;")

    })

});


mainHeader.appendChild(maleButton)
mainHeader.appendChild(femaleButton)
mainHeader.appendChild(otherButton)
mainHeader.appendChild(filmsButton)

//filters
const maleCharacters = people.filter(person => person.gender !== 'male')
const femaleCharacters = people.filter(person => person.gender !== 'female')
const otherCharacters = people.filter(person => person.gender !== 'female' && person.gender !== 'male')

Answer 1

You need to remove your old animation classes when clicking another button.

function removeAnimationClasses() {
  const buttons = userList.querySelectorAll("button");

  buttons.forEach(function(button) {
    button.classList.remove = 'animated infinite bounce delay-2s;';
  });
}


maleButton.addEventListener('click', () => {
    removeAnimationClasses();
    maleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s'
    })
});
//making female characters bounce on page
let femaleButton = document.createElement('button')
femaleButton.textContent = 'Female Characters'
femaleButton.addEventListener('click', () => {
    removeAnimationClasses();
    femaleCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});
//making non gender characters bounce on page
let otherButton = document.createElement('button')
otherButton.textContent = 'Non-Gender Characters'
otherButton.addEventListener('click', () => {
    removeAnimationClasses();
    otherCharacters.forEach(character => {
        let matchedDiv = allDivs.find((oneDiv) => {
            return oneDiv.firstChild.textContent === character.name
        })
        //matchedDiv.setAttribute("style", "display: none;")
        matchedDiv.className = 'animated infinite bounce delay-2s;'
    })
});

What previous code has extra is

function removeAnimationClasses() {
  const buttons = userList.querySelectorAll("button");

  buttons.forEach(function(button) {
    button.classList.remove = 'animated infinite bounce delay-2s;';
  });
}

and removeAnimationClasses(); at the beginning of each .addEventListener('click'