JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="booklist">
    <li>Book 1</li>
    <li>Book 1</li>
    <li>Book 1</li>
    <li>Book 1</li>
    <li>Book 1</li>
    <li>Book 1</li>
    <li>Book 1</li>
    <li>Book 1</li>
    <li>Book 1</li>
    <li>Book 1</li>
</ul>

<ul id="music">
    <li>Music 1</li>
    <li relevant="true">Music 1</li>
    <li>Music 1</li>
    <li>Music 1</li>
    <li>Music 1</li>
    <li>Music 1</li>
    <li>Music 1</li>
    <li relevant="true">Music 1</li>
    <li>Music 1</li>
    <li>Music 1</li>
</ul>

CSS

li[relevant=true] {
    color: red;
}

JavaScript

jQuery.fn.toggleAttr = function(name, onValue, offValue, on) {
    function set($element, on) {
        var value = on ? onValue : offValue;
        return value == null ? $element.removeAttr(name) : $element.attr(name, value);
    }
    return on !== undefined ?
    // next line is where I'm confused
    set(this, on) : this.each(function(i, element) {
        var $element = $(element);
        set($element, $element.attr(name) !== onValue);
    });
};


jQuery('ul#booklist li').toggleAttr("relevant", "true", "false", true);
jQuery('ul#music li').toggleAttr("relevant", "true", "false");