JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">

        <div id="controls">
            <form>
                <h2>Genre:</h2>

                <input type="checkbox" name="genre" value="rock" id="rock">
                <label for="rock">Rock</label>

                <input type="checkbox" name="genre" value="electronic" id="electronic">
                <label for="electronic">Electronic</label>

                <input type="checkbox" name="genre" value="action" id="action">
                <label for="action">Action</label>

                <input type="checkbox" name="genre" value="cinematic" id="cinematic">
                <label for="cinematic">Cinematic</label>

                <h2>Mood</h2>
                <input type="checkbox" name="mood" value="happy" id="happy">
                <label for="happy">Happy</label>

                <input type="checkbox" name="mood" value="sad" id="sad">
                <label for="sad">Sad</label>
            </form>
        </div>

        <div id="music-container">
            <div class="music" data-genre="rock" data-mood="happy">
                <h3>A happy rock song</h3>
            </div>

            <div class="music"data-genre="rock" data-mood="sad">
                <h3>A sad rock song</h3>
            </div>

            <div class="music" data-genre="electronic" data-mood="happy">
                <h3>A happy electronic song</h3>
            </div>

            <div class="music" data-genre="electronic" data-mood="sad">
                <h3>A sad electronic song</h3>
            </div>

            <div class="music" data-genre="action" data-mood="happy">
                <h3>A happy action song</h3>
            </div>

            <div class="music" data-genre="action" data-mood="sad">
                <h3>A sad action song</h3>
            </div>

            <div class="music" data-genre="cinematic" data-mood="happy">
                <h3>A happy cinematic action song</h3>
            </div>

            <div class="music"...

CSS

.music {
    display: none;
}

JavaScript

var filter = {
        genre: [],
        mood: []
    };

$(function(){
    $("#controls :checkbox").click(function() {
        var name = $(this).attr('name'),
        value = $(this).val();

        if($(this).is(':checked')) {
            filter[name].push(value);
        }
        else {
            var i = filter[name].indexOf(value)
            filter[name].splice(i, 1);
        }

        $('.music').hide();

        for(var a in filter['genre']) {

            if(filter['mood'].length > 0) {
                for(var b in filter['mood']) {
                    $('.music[data-genre = ' + filter['genre'][a] + '][data-mood = ' + filter['mood'][b] + ']').show();
                }
            }
            else {
                $('.music[data-genre = ' + filter['genre'][a] + ']').show();
            }
        }
    });
});