JSFiddle - React, Tailwind, and code Playground

HTML

<div id="filter" style="float: left;">
    <div class="col-xs-6">
         <h3 class="text-center">Stars</h3>

        <div class="well" style="max-height: 300px;overflow: auto;">
            <ul https://jsfiddle.net/#saveclass="list-group checked-list-box">
                <li>
                    <input type="checkbox" data-jafilter="star" value="1" />Star 1 - (<span>0</span>)</li>
                <li>
                    <input type="checkbox" data-jafilter="star" value="2" />Star 2 - (<span>0</span>)</li>
                <li>
                    <input type="checkbox" data-jafilter="star" value="3" />Star 3 - (<span>0</span>)</li>
                <li>
                    <input type="checkbox" data-jafilter="star" value="4" />Star 4 - (<span>0</span>)</li>
            </ul>
        </div>
    </div>
    <div class="col-xs-6">
         <h3 class="text-center">Color</h3>

        <div class="well" style="max-height: 300px;overflow: auto;">
            <ul id="check-list-box" class="list-group checked-list-box">
                <li>
                    <input type="checkbox" data-jafilter="color" value="1" />Color 1 - (<span>0</span>)</li>
                <li>
                    <input type="checkbox" data-jafilter="color" value="10" />Color 10 - (<span>0</span>)</li>
                <li>
                    <input type="checkbox" data-jafilter="color" value="20" />Color 20 - (<span>0</span>)</li>
                <li>
                    <input type="checkbox" data-jafilter="color" value="30" />Color 30 - (<span>0</span>)</li>
            </ul>
        </div>
    </div>
    <div class="col-xs-6">
         <h3 class="text-center">Board</h3>

        <div class="well" style="max-height: 300px;overflow: auto;">
            <ul class="list-group checked-list-box">
                <li>
                    <input type="checkbox" data-jafilter="board" value="1" />Board 1 - (<span>0</span>)</li>
                <li>
                    <input type="checkbox"...

JavaScript

!function(t){"use strict";var e=".jaFilter",n={events:"change",containerId:null,rows:null,noRecount:null,activeFilters:[],filtersInDepth:[],countInDepth:[],otherFilters:[],jaAttribute:"jafilter",notInRange:"notInFilterRange",hideOnlyAvailableData:!1,callback:function(){},done:function(){}},i={filter:function(e){{var n=e.notInRange,r=!0;e.callback}return e.activeFilters=t.extend({},e.activeFilters),e.$rows.filter(function(){var r=t(this),a=t(this).data(),o=!0;return t.each(e.activeFilters,function(n,s){if(e.filtersInDepth.length>0&&-1!=t.inArray(n,e.filtersInDepth)){if(o=i.depthFilter(r,n,e),!o)return!1}else if(e.activeFilters[n].length>0)if("undefined"==typeof a[n]&&e.hideOnlyAvailableData)o=!0;else{if(-1==t.inArray(a[n],s))return o=!1,!1;o=!0}}),e.otherFilters.length>0&&("string"==typeof e.otherFilters&&(e.otherFilters=[e.otherFilters]),t.each(e.otherFilters,function(t,e){e.apply(this,[r])})),o?void t(this).removeClass(n):!0}).addClass(n),this.countAttributesForFilter(e,"onfilter"),r},depthFilter:function(e,n,i){var r=i.notInRange,a=!0;return e.find("[data-"+n+"]").each(function(){var e=t(this),o=e.data(n);0==i.activeFilters[n].length?(e.removeClass(r),a=!0):-1==t.inArray(o,i.activeFilters[n])?e.addClass(r):(e.removeClass(r),a=!0)}),a},countAttributesForFilter:function(e,n){var i=[];e.$rows.not("."+e.notInRange).each(function(){var n=t(this),r=t(this).data();t.each(r,function(t,e){"undefined"==typeof i[t]&&(i[t]=[]),"undefined"!=typeof i[t][e]?i[t][e]+=1:i[t][e]=1}),e.countInDepth.length>0&&t.each(e.countInDepth,function(r,a){n.find("[data-"+a+"]").not("."+e.notInRange).each(function(){var e=t(this).data(a);"undefined"==typeof i[a]&&(i[a]=[]),"undefined"!=typeof i[a][e]?i[a][e]+=1:i[a][e]=1})})}),"string"==typeof e.noRecount&&(e.noRecount=[e.noRecount]),e.$selector.find('[type="checkbox"]').each(function(){var r=t(this).data(e.jaAttribute);if(-1!=t.inArray(r,e.noRecount)&&"init"!=n);else{var a,o=t(this).val();a="undefined"==typeof i[r]||"undefined"==typeof...