JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float: left;">
    <div id="myForm">
        <input type="checkbox" id="john" class="person"/>
        <label>Show John</label>
        <input type="checkbox" id="steve" class="person"/>
        <label>Show Steve</label>
    </div>
</div>

JavaScript

function setCookie(c_name,value,expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate);
}

function getCookie(c_name) {
    if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1) { 
            c_start=c_start + c_name.length+1 
            c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
        } 
    }
    return null;
}

$(document).ready(function() {
    
    if($('#john').is(':checked') == 1){
        alert("true");
    }else{
        alert("false");
    }
    
    
    checkCookie();
    $(".person:not(:checked)").next().hide();
});

$('#john, #steve').change(function() {
    if( $(this).is(':checked') ) $(this).next().show();
    else $(this).next().hide();
    set_check();
}); 

function checkCookie(){
    $('#john').attr("checked", getCookie('calOption1') == 1 ? true : false);
    $('#steve').attr("checked", getCookie('calOption2') == 1 ? true : false);
}

function set_check(){
    setCookie('calOption1', $('#john').is(':checked')? 1 : 0, 100);
    setCookie('calOption2', $('#steve').is(':checked')? 1 : 0, 100);
}