JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<ul>
    <li id="1">1</li>
    <li class="a">2</li>
    <li class="a">3</li>
</ul>

<br /><br /><br />
<ul>
    <li id="2">1</li>
    <li class="b">2</li>
    <li class="b">3</li>
</ul>

CSS

.colorRed {
    color: red;
}

.fontWeightBold {
    font-weight: bold;
}

JavaScript

$.fn.agregate = function(newCollection) {
    return this.pushStack(newCollection, "agregate", "");
};


var collectionA = $("#1"),
    collectionB = $("#2");

collectionA
    .add($(".a"))
        .addClass("colorRed")
        .end()
    .addClass("fontWeightBold");


collectionB
    .agregate($(".b"))
        .addClass("colorRed")
        .end()
    .addClass("fontWeightBold");