JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="fruitButtons">
    <input type="radio" name="radio" id="Apple"><label for="Apple">Apple</label>
    <input type="radio" name="radio" id="Banana"><label for="Banana">Banana</label>
    <input type="radio" name="radio" id="Citron"><label for="Citron">Citron</label>
</div>
<br>
    <b>selected:</b> <div class="status">none</div>

JavaScript

$(function() {

        var uncheck = apple = banana = citron = 0;

        $(".fruitButtons").buttonset();
		$(".fruitButtons label").click(function(){

    		var name = $(this).text();

    		// see if button was previously checked
            // if yes set var 'uncheck' to 1
            if ((name == "Apple") && (apple)) uncheck = 1;
    		if ((name == "Banana") && (banana)) uncheck = 1;
    		if ((name == "Citron") && (citron)) uncheck = 1;
    		apple = banana = citron = 0;
    	
            if (!uncheck) {
		    	if (name == "Apple") apple = 1;
    			if (name == "Banana") banana = 1;
    			if (name == "Citron") citron = 1;

				// display name of currently checked button
                $(".status").text(name);
    		}
    
			else {
                // unchecking the hidden input element
    			$(this).prev().prop("checked", false);

                // resetting the buttonset to its initial state
    			$(this).parent().buttonset("refresh");

                $(".status").text("none");
                uncheck = 0;
           }
		});

	});