JSFiddle - React, Tailwind, and code Playground

HTML

<p>Check some of the checkboxes, and reload this page to see if the changes stick ?</p>
<br />
<input class="main" type="checkbox" alt="test1" /><br />
<div id="test1" class="hidden"><input type="checkbox" /></div>
<br /><br />
<input class="main" type="checkbox" alt="test2" /><br />
<div id="test2" class="hidden"><input type="checkbox" /></div>
<br /><br />
<input class="main" type="checkbox" alt="test3" /><br />
<div id="test3" class="hidden"><input type="checkbox" /></div>
<br /><br />
<input class="main" type="checkbox" alt="test4" /><br />
<div id="test4" class="hidden"><input type="checkbox" /></div>
<br /><br />
<input class="main" type="checkbox" alt="test5" /><br />
<div id="test5" class="hidden"><input type="checkbox" /></div>
<br /><br />
<input class="main" type="checkbox" alt="test6" /><br />
<div id="test6" class="hidden"><input type="checkbox" /></div>
<br /><br />

CSS

.hidden {display:none}

JavaScript

$(document).ready(function () {
    if (localStorage.getItem('boxes')) {
        var boxes = JSON.parse(localStorage.getItem('boxes'));
        $.each(boxes, function (idx, val) {
            var box = $('.main').eq(idx);
            box.prop('checked', val);
            $('#' + box.attr('alt')).toggle(val);
        });
    }

    $('.main').on('change', function () {
        var val = $(this).attr('alt'),
            boxes = {};

        $.each($('.main'), function (i, el) {
            boxes[$(el).index('.main')] = el.checked;
        });

        $('#' + val).toggle(this.checked);
        localStorage.setItem('boxes', JSON.stringify(boxes));
    });
});