JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="scr">
    <li class="scr">
        <input type="checkbox" class="chkscr"/>
        <h3>Item Name</h3>
        <div class="scr">Contents</div>
    </li>
    <li class="scr">
        <input type="checkbox" class="chkscr"/>
        <h3>Item Name</h3>
        <div class="scr">Contents</div>
    </li>
    <li class="scr">
        <input type="checkbox" class="chkscr"/>
        <h3>Item Name</h3>
        <div class="scr">Contents</div>
    </li>
</ul>

JavaScript

//Set initial state of each scr section
$('input.chkscr').each(function() {
    chkSCR_Click($(this));
});

//Setup click event
$('input.chkscr').click(function() {
    chkSCR_Click($(this));
});

//Toggle corresponding scr section for the checkbox
function chkSCR_Click(ctl) {
    if (ctl.attr('checked')) {
        ctl.siblings('div.scr').stop().show();
    }
    else {
        ctl.siblings('div.scr').stop().hide();
    }
}