JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <input type="radio" name="weather" value="sunny" id="sunny"/>
    <input type="radio" name="weather" value="cloudy" id="cloudy"/>
    <input type="radio" name="weather" value="rainy" id="rainy"/>
    <input type="radio" name="weather" value="class-5-kill-storm" id="class-5-kill-storm"/>
</fieldset>

CSS

p {
    padding: 10px;   
}

a.icon {
    float: left;
    margin: 5px;
    
    /* width and height of your weather icons */
    width: 20px;
    height: 20px;
    
    background: red;
}

a:hover.icon {
    background: blue;
}

a.selected,
a:hover.selected {
    background: green;   
}

JavaScript

$('input[name=weather]').each(function() {
    var radio = $(this);

    var icon = $('<a class="icon ' + this.value + '"></a>');
    icon.click(function(e) {
        e.preventDefault();
        icon.siblings('.icon').removeClass('selected');
        icon.addClass('selected');
        radio.attr('checked', 'true');
    });
    $(this).parent().append(icon);
});