PHP - AJAX checkbox filter using data-tag attribute
<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>