JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="top-options">
    <li>
        <input type="radio" name="toptions" />
    </li>
    <li>
        <input type="radio" name="toptions" />
    </li>
    <li>
        <input type="radio" name="toptions" />
    </li>
    <li>
        <input type="radio" name="toptions" />
    </li>
</ul>

CSS

ul {
    list-style-type:none;
}
ul li {
    padding:50px;
    float:left;
    margin-right:10px;
    background:red;
}
.active {
    background:green!important;
}

JavaScript

$li = $('ul.top-options li');
$li.click(function () {
    var self = $(this);
    $li.not(self).removeClass('active');
    if (self.hasClass('active')) {
        self.removeClass('active').find('input').prop('checked', false);
    } else {
        self.addClass('active').find('input').prop('checked', true);
    }
});
$li.filter(':has(:checked)').click();