JSFiddle - React, Tailwind, and code Playground

by Chris Ames

HTML

<div class="tags">
     <h3>service</h3>

    <label>
        <input type="checkbox" id="type-Website" rel="Website">Website</label>
    <label>
        <input type="checkbox" id="type-Email" rel="Email">Email</label>
    <label>
        <input type="checkbox" id="type-Branding" rel="Branding">Branding</label>
     <h3>sector</h3>

    <label>
        <input type="checkbox" id="type-Automotive" rel="Automotive">Automotive</label>
    <label>
        <input type="checkbox" id="type-Property" rel="Property">Property</label>
</div>
<div class="portfolio-item" data-id="one-page-website" data-category="Automotive Email Website" style="display: block;">
    	<h1 class="entry-title">One Page Website</h1>

</div>
<div class="portfolio-item" data-id="some-logo" data-category="Branding Property" style="display: block;">
    	<h1 class="entry-title">some Logo</h1>

</div>
<div class="portfolio-item" data-id="some-email-campaign" data-category="Automotive Email" style="display: block;">
    	<h1 class="entry-title">Some Email Campaign</h1>

</div>
<div class="portfolio-item" data-id="some-brand" data-category="Automotive Branding Email" style="display: block;">
    	<h1 class="entry-title">some brand</h1>

</div>
<div class="portfolio-item" data-id="property company" data-category="Branding Email Property Website Automotive" style="display: block;">
    	<h1 class="entry-title">Stationery</h1>

</div>

CSS

.first-item {
    background-color: green
}

.one-item {
    background-color: turquoise
}

.last-item {
    background-color: red
}

JavaScript

function StringContainsAllItems(stringVal, items) {
    if (items.length == 0 || items.length == null) {
        return false;
    }

    for (var i = 0; i < items.length; i++) {
        console.log("Item: " + items[i]);
        if (stringVal.indexOf(items[i]) == -1) {
            return false;
        }
    }

    return true;
}


$(function () {
    //initialize first item
    $('div.portfolio-item:visible:first').addClass("first-item");
    //initialize last item
    $('div.portfolio-item:visible:last').addClass("last-item");

    var $checkboxes = $("input[id^='type-']");
    $('input[type=checkbox]:checked').attr('checked', false);

    $checkboxes.change(function () {
        //remove special classes for the first item and the only item
        $('div.portfolio-item').removeClass("one-item");
        $('div.portfolio-item').removeClass("first-item");
        $('div.portfolio-item').removeClass("last-item");
        
        if ($('input[type=checkbox]:checked').length > 0) {

            var selectorArray = [];

            $checkboxes.filter(':checked').each(function () {
                selectorArray.push($(this).attr('rel'));
                console.log($(this).attr('rel'));
            });

            $('[data-category]').hide() // hide all rows
            .filter(function () {
                return StringContainsAllItems($(this).data('category'), selectorArray);
            }).show(); // reduce set to matched and show 
            
            
        } else {
            $('[data-category]').show();
        }
        
    var visibleCount = $('div.portfolio-item:visible').length;

    if (visibleCount === 1) {
        // do some stuff here, this time special class 'one-itemä is added
        // maybe you can handle ::after here 
         $('div.portfolio-item:visible').addClass("one-item");
    }
    else {
        $('div.portfolio-item:visible:first').addClass("first-item");
        $('div.portfolio-item:visible:last').addClass("last-item");
   ...