JSFiddle - React, Tailwind, and code Playground

by asif097

HTML

<span>this is a selection</span>

<div class="selections">
    <div class="radio 1">
        <input class="one" type="radio" name="group1">
    </div>
    <div class="radio 2">
        <input class="two" type="radio" name="group1" checked="checked">
    </div>
</div>
<div class="clear"></div>
        
<span>this is another selection</span>

<div class="selections">
    <div class="radio 1">
        <input class="one" type="radio" name="group2">
    </div>
    <div class="radio 2">
        <input class="two" type="radio" name="group2" checked="checked">
    </div>
</div>

CSS

.selections {
    display:block;
    height:50px;
    width:100%;
}
.radio {
    float:left;
}
.letter {
    display:block;
    margin-left:90px;
    font-size:20px;
    background:#000;
    color:#fff;
    width:20px;
    height:20px;
}

JavaScript

$(".selections").append("<div class='letter'>A</div>");
$(".one").click(function () {
    $(".letter").text("B");
});
$(".two").click(function () {
    $(".letter").text("A");
});