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

$(document).ready(function() {
     $('ul.top-options li input[type=radio]').click(function() {
         if(!$(this).closest('li').hasClass('active')){
             $('ul.top-options li').removeClass('active');
             $(this).closest('li').addClass('active');
         }else
             $(this).removeAttr('checked').closest('li').removeClass('active');
    });
    
});