JSFiddle - React, Tailwind, and code Playground

HTML

<label for="checkbox1">Div 1</label>
    <input type="checkbox" name="div" id="checkbox1" data-div-id="1">
<label for="checkbox2">Div 2</label>
    <input type="checkbox" name="div" id="checkbox2" data-div-id="2">
<label for="checkbox3">Div 3</label>
    <input type="checkbox" name="div" id="checkbox3" data-div-id="3">

<hr/>
        
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
        
<br/>
        
<label for="radio1">Div 4</label>
    <input type="radio" name="div" id="radio1" data-div-id="4">
<label for="radio2">Div 5</label>
    <input type="radio" name="div" id="radio2" data-div-id="5">
<label for="radio3">Div 6</label>
    <input type="radio" name="div" id="radio3" data-div-id="6">

<hr/>        
        
<div id="div4">DIV4</div>
<div id="div5">DIV5</div>
<div id="div6">DIV6</div>

JavaScript

$(document).ready(function() {
    
    var checkboxes = $('input:checkbox'),
        radios     = $('input:radio'),
        divs       = $('div');
    
    // hide all divs
    divs.hide();
    
    checkboxes.change(function( e ) {
        var e = e || window.event,
            target = e.target || e.srcElement;
        
        $('#div' + $(target).data('div-id')).toggle();
    });
    
    radios.change(function( e ) {
        var e = e || window.event,
            target = e.target || e.srcElement;
        
        divs.hide();
        $('#div' + $(target).data('div-id')).toggle();
    });
});