title: Push to an array only if it isn't present already
body: <p>I have a few check boxes which filter products depending on what checkboxes have been selected. The filter works when the check boxes are clicked, and product ids are added to an array. As you can see both filters have some of the same ids, so if they click more than one input boxes I want to make sure the ids are only pushed into the array once. Eg. if they have input.white selected and input.greymelange selected then they clicked the filter-btn I only want repeated ids to be pushed once. Is there a way I can do this?</p>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>var productIds = [""];
  
  $(document).on('click', 'a.filter-btn', function(e){
  
      $( ".listingTemplate" ).html("");
     if ($('input.white').is(':checked')) {
            productIds.push("4021401143741", "4021402266227");
      } 
  
     if ($('input.greymelange').is(':checked')) {
            productIds.push("4021401143741", "4021402266227","4021402266418", "4021401143796");
      } 
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;input type="checkbox" id="white" class="white" value="white" /&gt;                
   &lt;input type="checkbox" id="greymelange" class="greymelange" value="greymelange" /&gt;
  &lt;a href="#" class="filter-btn"&gt;filter&lt;/a&gt;
  </code></pre>