JSFiddle - React, Tailwind, and code Playground

by ukkpower

HTML

<div class="voteGroup">
       <input type="radio" id="price_0" value="1" name="price"  class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
              <div class="radio">asdasdasda</div>
       </a>
       <input type="radio" id="price_1" value="2" name="price"  class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
              <div class="radio">asdasdas</div></a>
       <input type="radio" id="price_2" value="3" name="price"  class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio">asdasda</div>
       </a>
       <input type="radio" id="price_3" value="4" name="price"  class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio">asdasd</div>
       </a>
       <input type="radio" id="price_4" value="5" name="price"  class="radio-checked">
       <a href="#" class="radio-fx price radio-checked" title=" check me ">
               <div class="radio">asdasdas</div>
       </a>
   </div>

CSS

div {
    color: #00FF00;
}

div.radio-hover{
    color: #FF0000;
}

div.radio-checked {
    color: yellow;
}

JavaScript

$(function() {
    $('.radio-fx').on("mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.prevAll().andSelf().find('div').addClass('radio-hover');
            $self.nextAll().find('div').removeClass('radio-hover');
    }).on("mouseout", function() { // Handles the mouseout
            $(this).prevAll().andSelf().find('div').removeClass('radio-hover');
    });
});

        $('.radio-fx').on('click',function(e) {
            var $self = $(this);
            e.preventDefault();
            $check = $(this).prev('input');
            
            $check.attr('checked', true);
            $self.prevAll().andSelf().find('div').addClass('radio-checked');
            $self.nextAll().find('div').removeClass('radio-checked');            
            
        });