JSFiddle - React, Tailwind, and code Playground

by markallgood

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.0-rc.1/jquery-ui.min.js"></script>
<div id="container">
    <input type="radio" id="radio1" name="tipo" value="1"/>
    <label for="radio1">Alt1</label>
    
    <input type="radio" id="radio2" name="tipo" value="2"/>
    <label for="radio2">Alt2</label>
</div>
<p>
    <input id="attachButton" type="button" value="Attach" />
    <input id="detachButton" type="button" value="Detach" />
</p>

JavaScript

$(function() {
    var radio3radio = $("<input type='radio' id='radio3' name='tipo' value='3'/>");
    var radio3label = $("<label for='radio3'>Alt3</label>");

    function attachRadio3() {
        $("#container").append(radio3radio).append(radio3label);
        if (!radio3radio.is(":ui-button")) {
            radio3radio.button();
        }
        $("#container").buttonset('refresh');
    }
    
    function detachRadio3 () {
        radio3radio.detach();
        radio3label.detach();
        $("#container").buttonset('refresh');
    }

    // Setup
    $("#container").buttonset();
    
    $("#attachButton").on("click", attachRadio3);
    $("#detachButton").on("click", detachRadio3);
})