JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a><i class="fa fa-square-o"></i> OPTION 1</a>
    </li>
    <li>
        <a><i class="fa fa-square-o"></i> OPTION 2</a>
    </li>
    <li>
        <a><i class="fa fa-square-o"></i> OPTION 3</a>
    </li>
</ul>

CSS

.active {
    color: red;
}

.fa {
    display: inline-block;
    width: 6px;
    height: 6px;
}

.fa-square-o {
    border-style: solid;
    border-width: 0px;
}

.fa-check-square-o {
    border-style: solid;
    border-width: 1px;
}

JavaScript

$('li a').bind('click', function () {
    $('li a').not(this).removeClass("active").children("i").removeClass("fa-check-square-o").addClass("fa-square-o");
    $(this).toggleClass('active').children("i").toggleClass("fa-square-o fa-check-square-o");
});