JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Narrow down your search for lessons... with filters!</h4> 
<form id="filters">
    <label>
        <input type="checkbox" id="1">Filter 1</label>
    <br>
    <label>
        <input type="checkbox" id="2">Filter 2</label>
    <br>
    <label>
        <input type="checkbox" id="3">Filter 3</label>
</form>
<ul>
    <li class="lesson" id="lesson_1" data-filters="[]">Lesson with filters: none</li>
    <li class="lesson" id="lesson_2" data-filters="[1]">Lesson with filters: 1</li>
    <li class="lesson" id="lesson_3" data-filters="[2]">Lesson with filters: 2</li>
    <li class="lesson" id="lesson_4" data-filters="[3]">Lesson with filters: 3</li>
    <li class="lesson" id="lesson_5" data-filters="[1, 2]">Lesson with filters: 1, 2</li>
    <li class="lesson" id="lesson_6" data-filters="[1, 3]">Lesson with filters: 1, 3</li>
    <li class="lesson" id="lesson_7" data-filters="[2, 3]">Lesson with filters: 2, 3</li>
    <li class="lesson" id="lesson_8" data-filters="[1, 2, 3]">Lesson with filters: 1, 2, 3</li>
</ul>

SCSS

<h4>Narrow down your search for lessons... with filters!</h4> 
<form id="filters">
    <label>
        <input type="checkbox" id="1">Filter 1</label>
    <br>
    <label>
        <input type="checkbox" id="2">Filter 2</label>
    <br>
    <label>
        <input type="checkbox" id="3">Filter 3</label>
</form>
<ul>
    <li class="lesson" id="lesson_1" data-filters="[]">Lesson with filters: none</li>
    <li class="lesson" id="lesson_2" data-filters="[1]">Lesson with filters: 1</li>
    <li class="lesson" id="lesson_3" data-filters="[2]">Lesson with filters: 2</li>
    <li class="lesson" id="lesson_4" data-filters="[3]">Lesson with filters: 3</li>
    <li class="lesson" id="lesson_5" data-filters="[1, 2]">Lesson with filters: 1, 2</li>
    <li class="lesson" id="lesson_6" data-filters="[1, 3]">Lesson with filters: 1, 3</li>
    <li class="lesson" id="lesson_7" data-filters="[2, 3]">Lesson with filters: 2, 3</li>
    <li class="lesson" id="lesson_8" data-filters="[1, 2, 3]">Lesson with filters: 1, 2, 3</li>
</ul>

JavaScript

$(document).ready(function () {

    $("#filters :checkbox").click(function () {
        $("li").hide();
        var activeFilters = getActiveFilters();
        $(".lesson").each(function () {
            var $lesson = $(this);
            var lessonFilters = $lesson.data("filters");
            if (lessonQualified(activeFilters, lessonFilters)) {
                $lesson.show();
            }
        });
    });

    function getActiveFilters() {
        var filterArray = [];
        $("#filters :checkbox:checked").each(function () {
            filterArray.push(parseInt($(this).attr("id")));
        });
        return filterArray;
    }

    function lessonQualified(filters, lesson) {
        for (var i = 0; i < filters.length; i++) {
            if ((lesson.indexOf(filters[i])) == -1) {
                return false;
            }
        }
        return true;
    }

});