title: How to fix: CSS animation reset everytime user clicks a button
body: <p>I've got 3 buttons on my page(male, female, non-gender) that cause the characters to bounce on the page. Currently when the user clicks a second button the first button's characters keep bouncing. How do I make it so only one button's characters bounce?
  JavaScript code below:</p>
  
  <pre class="lang-js prettyprint-override"><code>const allDivs = Array.from(document.querySelectorAll('div'))
  
  const mainHeader = document.querySelector('header')
  
  let maleButton = document.createElement('button')
  maleButton.textContent = 'Male Characters'
  maleButton.addEventListener('click', () =&gt; {
      maleCharacters.forEach(character =&gt; {
          let matchedDiv = allDivs.find((oneDiv) =&gt; {
              return oneDiv.firstChild.textContent === character.name
          })
          //matchedDiv.setAttribute("style", "display: none;")
          matchedDiv.className = 'animated infinite bounce delay-2s'
      })
  });
  
  let femaleButton = document.createElement('button')
  femaleButton.textContent = 'Female Characters'
  femaleButton.addEventListener('click', () =&gt; {
      femaleCharacters.forEach(character =&gt; {
          let matchedDiv = allDivs.find((oneDiv) =&gt; {
              return oneDiv.firstChild.textContent === character.name
          })
          //matchedDiv.setAttribute("style", "display: none;")
          matchedDiv.className = 'animated infinite bounce delay-2s;'
      })
  });
  
  let otherButton = document.createElement('button')
  otherButton.textContent = 'Non-Gender Characters'
  otherButton.addEventListener('click', () =&gt; {
      otherCharacters.forEach(character =&gt; {
          let matchedDiv = allDivs.find((oneDiv) =&gt; {
              return oneDiv.firstChild.textContent === character.name
          })
          //matchedDiv.setAttribute("style", "display: none;")
          matchedDiv.className = 'animated infinite bounce delay-2s;'
      })
  });
  
  mainHeader.appendChild(maleButton)
  mainHeader.appendChild(femaleButton)
  mainHeader.appendChild(otherButton)
  </code></pre>