JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="checkbox1">1:</label>
    <input type='checkbox' id='checkbox1'/>
</div>
<div>
    <label for="checkbox2">2:</label>
    <input type='checkbox' id='checkbox2'/>
</div>
<div>
    <input type='checkbox' id='checkboxRead'/>
</div>
<div>
    <input type='checkbox' id='checkboxWrite'/>
</div>

CSS

.grayed-out {
    color: gray;
}

JavaScript

$.fn.toggleLinks = function() {
    return $(this).each(function() {
        var checkbox = this;
        var $clear = $("<a>clear</a>").click(function() {
            checkbox.checked = false;
            $checkbox.change();
        });
        var $select = $("<a>select</a>").click(function() {
            checkbox.checked = true;
            $checkbox.change();
        });         
        var $checkbox = $(checkbox).change(function() {
            if (this.checked) {       
                $clear.removeClass("grayed-out");
                $select.addClass("grayed-out");
            } else {
                $clear.addClass("grayed-out");
                $select.removeClass("grayed-out");
            }
        }).change();
        
        $(this.labels.length // insert after label if available
            ? this.labels[0]
            : this
        ).after(
            document.createTextNode(" ("),
            $clear,
            document.createTextNode(" "),
            $select,
            document.createTextNode(")")
        );
    });
};

$("input:checkbox").toggleLinks();