title: Is only able to use the last element of the antZipCodes array when using the pestDisplay function
body: <p>I wrote some JS that involves targeting the DOM, specifically a text input form. It only changes the display for the last element of the array when the user types in 95827. If the user types in 95828 or 95604, the display isn't filtered properly. </p>
  
  <p>Here's a link to the <a href="http://jsfiddle.net/c7kux0an/" rel="nofollow noreferrer">full code.</a>  </p>
  
  <p>I was told it may have to do with the removeDisplay function and how it's iterating through display (divs), but still can't manage to fix it. </p>
  
  <p>Still new to DOM Manipulation.</p>
  
  <pre><code>var display = document.querySelectorAll(".display");
  var zipCodeSearch = document.querySelector("#site-search");
  var ants = document.querySelector("#ants");
  const antZipCodes = [95828, 95604, 95827];
  
  zipCodeSearch.addEventListener('change', function(e) {
      // for(var i = 0; i &lt; antZipCode.length; i++) {
      //  if(antZipCode[i] === Number(e.target.value)) {
      //      removeDisplay(displayNone);
      //      addDisplay(ants);
      //  }
      // }
      pestDisplay(antZipCodes, ants, display, e);
  });
  
  function removeDisplay(items) {
      for(var i = 0; i &lt; items.length; i++) {
          items[i].style.display = "none";
      }
  }
  
  function addDisplay(item) {
      item.style.display = "block";
  }
  
  function displayAll(items) {
      for(var i = 0; i &lt; items.length; i++) {
          items[i].style.display = "block";
      }
  }
  
  function pestDisplay(arr, id, display, e) {
      for(var i = 0; i &lt; arr.length; i++) {
          if(arr[i] === Number(e.target.value)) {
              removeDisplay(display);
              addDisplay(id);
          } else {
              displayAll(display);
          }
      }
  }
  </code></pre>