JSFiddle - React, Tailwind, and code Playground

by Siddharth Motwani

HTML

<div id="tabs">
    <ul>
        <li>
            <a id="tab1" href="#tabs-1">
                <label for="bsl1" class="tab-label">
                    <input type="radio" name="biosafetyLevel" id="bsl1" checked="checked" value="1"/>BSL 1    
                </label>
            </a>
        </li>
        <li>
            <a id="tab2" href="#tabs-2">
                <label class="tab-label" for="bsl2">
                    <input type="radio" name="biosafetyLevel" id="bsl2" value="2"/>BSL 2
                </label>
            </a>
        </li>
        <!-- stubbed for brevity -->
     </ul>
</div>

JavaScript

$("#tabs > ul > li > a").on('click',function() {
    var curTab = $(this).attr('id');
    var curRadio = $("input[type='radio']:checked").attr('id');
    $("#"+curRadio).prop("checked", false);
    $("#" + curTab + "> label > input").prop('checked', true);
});