JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<input name="r" type="radio" id="foo"/><label for="foo">Label 1</label><br>
<input name="r" type="radio" id="bar"/><label for="bar">Label 2</label>

CSS

.arrow-up:before {
    content: "^";
}

.arrow-down:before {
    content: "v";
}

JavaScript

var wrap = "<div class='sortWrap'>";
    var sortUp = "<div class='sortIcon arrow-up'></div>";
    var sortDown = "<div class='sortIcon arrow-down'></div>";
    var combine = wrap + sortUp + sortDown + "</div>";

$('input[type=radio]+label').hover(function() {
    var checked = $(this).prev().is(':checked');
        if (checked == false) {
            $(this).append(combine);
        };  
        }, function() { 
            $(this).children('.sortWrap').remove();
    });