title: How do I connect multiple EventListeners so they work together as a filter system?
body: <p><a href="https://i.stack.imgur.com/D09rA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D09rA.png" alt="enter image description here" /></a>I am trying to build a filtering system using select tags. So I decided to go with removing and adding classes to my elements. Every filter works fine by themselves, but I want them to work together. For example when I choose Bali Papuan and then choose a process method I want to show only Bali Papuan with this Process method and so on.  How do I make this right?</p>
  <pre class="lang-js prettyprint-override"><code>var clear = document.getElementById('clear_button')
  var island = document.getElementById('select_island')
  var type = document.getElementById('select_type')
  var process_method = document.getElementById('select_process')
  var grade = document.getElementById('select_quality')
  var available = document.getElementById('select_available')
  var cp = document.getElementById('select_cp')
  clear.onclick = function(){
    island.value = &quot;all&quot;;
    type.value = &quot;all&quot;;
    process_method.value = &quot;all&quot;;
    grade.value = &quot;all&quot;;
    available.value = &quot;all&quot;;
    cp.value = &quot;all&quot;;
  }
  
  const filterBox = document.querySelectorAll('.box')
  
  
  var island = document.getElementById('select_island')
  var type = document.getElementById('select_type')
  var pm = document.getElementById('select_process')
  var quality = document.getElementById('select_quality')
  var available = document.getElementById('select_available')
  var cp = document.getElementById('select_cp')
  
  
  clear.addEventListener('click', function(){
    filterBox.forEach(elem =&gt;{
      elem.classList.remove('hide')
    })
  })
  
  
  island.addEventListener('change', function(){
    value = this.value
    filterBox.forEach(elem =&gt;{
      if (!elem.classList.contains(value)&amp;&amp; value !== 'all'){
        elem.classList.add('hide')
      }if (elem.classList.contains(value)){
        elem.classList.remove('hide')
      }  
    
    })})
  
  
  
    type.addEventListener('change', function(){
      value = this.value
      filterBox.forEach(elem =&gt;{
        if(!elem.classList.contains(value) &amp;&amp; value !== 'all'){
          elem.classList.add('hide')
        }if (elem.classList.contains(value)){
          elem.classList.remove('hide')
        }
      })})
  
  
  
  
  
  
  
  
  pm.addEventListener('change', function(){
      value = this.value
      filterBox.forEach(elem =&gt;{
        if(!elem.classList.contains(value) &amp;&amp; value !== 'all'){
          elem.classList.add('hide')
         }if (elem.classList.contains(value)){
          elem.classList.remove('hide')
          }
        })})
  
  
        quality.addEventListener('change', function(){
          value = this.value
          filterBox.forEach(elem =&gt;{
            if(!elem.classList.contains(value) &amp;&amp; value !== 'all'){
              elem.classList.add('hide')
            }if (elem.classList.contains(value)){
              elem.classList.remove('hide')
            }
          })})
  
  
          available.addEventListener('change', function(){
            value = this.value
            filterBox.forEach(elem =&gt;{
              if(!elem.classList.contains(value) &amp;&amp; value !== 'all'){
                elem.classList.add('hide')
              }if (elem.classList.contains(value)){
                elem.classList.remove('hide')
              }
            })})
  
  
            cp.addEventListener('change', function(){
              value = this.value
              filterBox.forEach(elem =&gt;{
                if(!elem.classList.contains(value) &amp;&amp; value !== 'all'){
                  elem.classList.add('hide')
                }if (elem.classList.contains(value)){
                  elem.classList.remove('hide')
                }
              })})
  </code></pre>
  <p>The code above simply manages clear_all button. Also it takes values from select tags and depending on it's output adds 'hide' class to my divs.</p>