JSFiddle - React, Tailwind, and code Playground

by Cameron Bernhardt

HTML

<div id="tabs">
<ul>
    <li><a href="#tabs1">M1</a></li>
    <li><a href="#tabs2">M2</a></li>
    <li><a href="#tabs3">M3</a></li>
    <li><a href="#tabs4">M4</a></li>
    <li><a href="#tabs5">M5</a></li>
    <li><a href="#tabs6">M6</a></li>
</ul>
<div id="tabs1">
    <div id="m1semester1" class="accordion">
        <h3>Semester 1</h3>
            <div>
                <ul id="m1s1w1" class="sortable">
                    <p>Week 1</p>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrow-4"></span>
                        <span class="ce">Item 1</span>
                    </li>
                </ul>
                <ul id="m1s1w2" class="sortable">
                    <p>Week 2</p>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrow-4"></span>
                        <span class="ce">Item 1</span>
                    </li>
                </ul>
            </div>
    </div>
    <div id="m1semester2" class="accordion">
        <h3>Semester 2</h3>
            <div>
                <ul id="m1s2w1" class="sortable">
                    <p>Week 1</p>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrow-4"></span>
                        <span class="ce">Item 1</span>
                    </li>
                </ul>
                <ul id="m1s2w2" class="sortable">
                    <p>Week 2</p>
                    <li class="ui-state-default">
                        <span class="ui-icon ui-icon-arrow-4"></span>
                        <span class="ce">Item 1</span>
                    </li>

                </ul>
            </div>
    </div>
    <p>
        <button id="saveAll">Save All</button> |
        <button id="clearAll">Clear All</button>
    </p>
</div>

JavaScript

$(document).ready(function () {
    console.log(localStorage.getItem('todoList'));
    
    var list = document.getElementById('m1s1w1');
    $("#saveAll").click(function (e) {
        e.preventDefault();
        localStorage.setItem('todoList', list.innerHTML);
        console.log(localStorage.getItem('todoList'));
    });
    $("#clearAll").click(function (e) {
        e.preventDefault();
        localStorage.clear();
        document.location.reload();
    });

    loadToDo();

    function loadToDo() {
        if (localStorage.getItem('todoList')) {
            list.innerHTML = localStorage.getItem('todoList');
        }
    }

});