JSFiddle - React, Tailwind, and code Playground

HTML

<div style="overflow:hidden; background-color:black">
<input type="checkbox" name="same" id="check1"> <lable>3</lable>
<input type="checkbox" name="same" id="check2"> <lable>2</lable>
<input type="checkbox" name="same" id="check3"> <lable>1</lable>
</div>
    
<div style="overflow:hidden; background-color:blue">
<input type="radio" name="same" id="check4"> <lable>4</lable>
<input type="radio" name="same" id="check5"> <lable>5</lable>
<input type="radio" name="same" id="check6"> <lable>6</lable>
</div>
    
    <div class=check1 style="display:none"> <p> Some information i want hidden (1) </div>
    <div class=check2 style="display:none"> <p> Some information i want hidden (2) </div>
    <div class=check3 style="display:none"> <p> Some information i want hidden (3) </div>
    <div class=check4 style="display:none"> <p> Some information i want hidden (4) </div>
    <div class=check5 style="display:none"> <p> Some information i want hidden (5) </div>
    <div class=check6 style="display:none"> <p> Some information i want hidden (6) </div>

JavaScript

$(document).ready(function() {

    $("input[type=checkbox]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).show();
        }
        else {
            $("." + divId).hide();
        }

    });
    $("input[type=radio]").change();
});

$(document).ready(function() {

    $("input[type=radio]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).show();
        }
        else {
            $("." + divId).hide();
        }

    });

});