JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calendar">
    <div><input type="radio" name="date" value="1" />1</div>
    <div><input type="radio" name="date" value="2" />2</div>
    <div><input type="radio" name="date" value="3" />3</div>
    <div><input type="radio" name="date" value="4" />4</div>
    <div><input type="radio" name="date" value="5" />5</div>
    <div><input type="radio" name="date" value="6" />6</div>
    <div><input type="radio" name="date" value="7" />7</div> <br clear="left" />
    <div><input type="radio" name="date" value="8" />8</div>
    <div><input type="radio" name="date" value="9" />9</div>
    <div><input type="radio" name="date" value="10" />10</div>
    <div><input type="radio" name="date" value="11" />11</div>
    <div><input type="radio" name="date" value="12" />12</div>
    <div><input type="radio" name="date" value="13" />13</div>
    <div><input type="radio" name="date" value="14" />14</div>
</div>

CSS

.calendar div {
    float:left;
    width:50px;
    height:20px;
    line-height:20px;
    text-align:center;
    background: #ccc;
    margin:2px;
    cursor:pointer;
}

div.selected {
    background:#00cc00;
}

JavaScript

$(".calendar :radio").hide().click(function(e){
    e.stopPropagation();
});
$(".calendar div").click(function(e){
    $(this).closest(".calendar").find("div").removeClass("selected");
    $(this).addClass("selected").find(":radio").click();
});