title: PHP - AJAX checkbox filter using data-tag attribute
body: <p>I have <code>data-tag="Novel"</code>. When I tick the 'Novel' checkbox it will show the books that contain 'Novel' in the <code>data-tag</code> attribute. Currently the javascript/Jquery part works for <code>data-tag</code> that contains a single value but not multiple values. How can I make it such that for example there are two books of which their <code>data-tags</code> are <code>data-tag="Fiction,Novel"</code> and <code>data-tag="Non-Fiction,Novel"</code> respectively and when i tick the 'Novel' checkbox it will show both books or when I tick the 'Fiction' checkbox it will only show the books that contains 'Fiction' in the <code>data-tag</code> attribute.</p>
  
  <p>Javascript/Jquery</p>
  
  <pre><code>$(document).ready(function(){       
      $('.genre').on('change', function(){
          var genreList = [];
  
          $('#filterContainer :input:checked').each(function(){
              var genre = $(this).val();
              genreList.push(genre);
          });
  
          if(genreList.length == 0)
              $('.blItem').fadeIn();
          else {
              $('.blItem').each(function(){
                  var item = $(this).attr('data-tag');
                  items = item.split(',');
  
                  if(jQuery.inArray(item,genreList) &gt; -1)
                      $(this).fadeIn('slow');
                  else
                      $(this).hide();
              });
          }   
      });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="filterContainer"&gt;
              &lt;div class="filter"&gt;
                  &lt;input id="check1" type="checkbox" name="check" value="Novel" class="genre"&gt;
                  &lt;label for="check1"&gt;Novel&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div class="filter"&gt;
                  &lt;input id="check2" type="checkbox" name="check" value="Fiction" class="genre"&gt;
                  &lt;label for="check2"&gt;Fiction&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div class="filter"&gt;
                  &lt;input id="check3" type="checkbox" name="check" value="Non-Fiction" class="genre"&gt;
                  &lt;label for="check3"&gt;Non-Fiction&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;div class="booksList in fade"&gt;
              &lt;?php 
              while($result = mysqli_fetch_array($query))
              {
                  $title = $result['title'];
                  $title = preg_replace('/[^A-Za-z0-9]/', "", $title);
  
                  $html = '&lt;div class="blItem" data-tag="' . $result['genre'] . '"&gt;
                              &lt;a class="blMask jt" href="readBooks.php?title=' . $title . '&amp;id=' . $result['id'] . '"&gt;
                                  &lt;img data-original="' . $result['imageURL'] . '"
                                  class="lazy thumb blThumb"
                                  alt=""&gt;
                              &lt;/a&gt;
                           &lt;/div&gt;';
  
                  echo $html;
              }
              ?&gt;
          &lt;/div&gt;
  </code></pre>