JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<section id="containerOne">
    <div id="divA">a</div>
    <div id="divB" class="aui-cm-contract">b</div>
    <div id="divC">c</div>
    <div id="divD">d</div>
</section>

<section id="containerTwo">
    <div id="divE" class="aui-cm-contract">e</div>
    <div id="divF">f</div>
    <div id="divG">g</div>
    <div id="divH" class="aui-cm-contract">h</div>
</section>

CSS

section div{
    display: block;
    background: red;
    color: white;
    padding: 10px;
    margin: 10px;
    width: 10%;
}

JavaScript

$(document).ready(function(){
    var user = 'pulpina';
	var rumiCache = {
        users : {
        	'Luke Skywalker': '1234567788969564twce',
            'Han Solo' : 'kdsbfdhesbfjdsbhfjdsf',
            'Princess Leia' : 'asdadasd435as4asd'
        }
    };
    rumiCache.users[user] = {
    	uiSetup : {
        	panels : {}
        },
        data : 123
    };
    $('section').each(function(){
    	var sectionID = $(this).attr('id');
        var sectionJSON = {};
    	$(this).find('div').each(function(){
            var count = $(this).index();
            var id = $(this).attr('id');
            var parent = $(this).parent().attr('id');
            var contract = false;
            if( $(this).hasClass('aui-cm-contract') ){
            	contract = true;
            }
            var data = {
                count : count,
                id : id,
                parent : parent,
                contract : contract
            }
            sectionJSON[count] = data;
        });
        rumiCache.users[user].uiSetup.panels[sectionID] = sectionJSON;
    });
    
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }
    var dataString = JSON.stringify(rumiCache);
    setCookie('rumiData',dataString,2020/01/01);
    console.log( JSON.parse(getCookie('rumiData')) );
});