So I have a list of hotel data, and if you click on it the color of the box becomes red. The problem is, how to save the results of the box that has been clicked (turned red) in Local Storage.

[![enter image description here](https://i.stack.imgur.com/sGkyE.png)](https://i.stack.imgur.com/sGkyE.png)

```html
<script>
    let rooms = 0;
    if (typeof(Storage) !== "undefined")
        console.log("Local Storage Available");
    else
        console.log("Opps.. No have Local Storage")

    function syncLocalStorage(activity, item, status) {
        switch (activity) {
            case 'ADD':
                break;
            case 'UPDATE':
                break;
            case 'DELETE':
                break;
            default:
                break;
        }
    }

    function spawnGate(gateName, roomCount) {
        const tpl = Array.from({
            length: roomCount
        }, (_, i) => i + 1).map(xx => {
            return `<div class="room" onclick="reserved(this, ${xx + rooms})"><span>${xx + rooms}</span></div>`;
        }).join('');
        rooms += roomCount;
        document.querySelector('#hotel').innerHTML += `<div class="gate">
            <h2>${gateName}</h2>
            <div class="rooms">${tpl}</div>
            </div>`;
        syncLocalStorage('ADD', tpl.value)
    }

    function reserved(el, num) {
        el.classList.toggle('reserved')
    }

    document.addEventListener('DOMContentLoaded', function(e) {
        e.preventDefault();
        spawnGate('Gate A', 24);
        spawnGate('Gate B', 24);
        spawnGate('Gate C', 24);
    }, false);
</script>

```