JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<p>Click on any row to toggle the <code>selected</code> class (and remove it from the rest).</p>
<p>Rows that are shaded black are matched by the rule in question.</p>
<div id="installations">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three" class="selected"></div>
    <div id="four"></div>
    <div id="five"></div>
</div>

CSS

p, #installations > div {
    margin: 0.5em;
}

#installations > div {
    height: 1.5em;
    line-height: 1.5em;
    color: #fff;
    background-color: #b0b0b0;
    padding: 0.5em;
}

#installations > div.with-jquery {
    background-color: #000;
}

#installations > div:after {
    content: '#' attr(id);
}

#installations > div.selected:after {
    content: '#' attr(id) '.selected';
}

JavaScript

$('#installations > div')
    .click(function() {
        var $t = $(this);
        $t.addClass('selected').siblings().removeClass('selected with-jquery');
        $t.add('#installations > div:not(.selected):lt(3)').addClass('with-jquery');
    })
    .filter('div.selected, div:not(.selected):lt(3)')
    .addClass('with-jquery');