JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div>
    Radio 1 - 
    <input type="radio" name="radio" class="radio" value="1" />
    <span class="red fa fa-circle-o"></span>
</div>
<div>
    Radio 2 - 
    <input type="radio" name="radio" class="radio" value="2" />
    <span class="blue fa fa-circle-o"></span>
</div>

CSS

.radio {
    display: none;
}
.red {
    color: red;
}
.blue {
    color: blue;
}

JavaScript

$('span.fa').on('click', function() {
    $('span.fa').removeClass('fa fa-dot-circle-o').addClass('fa fa-circle-o');
    $(this).removeClass('fa-circle-o').addClass('fa-dot-circle-o');
    
    //Check corresponding hidden radio
    $(this).prev('input.radio').prop('checked', true);
});