JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="article1">
            <div data-role="header" data-theme="a" data-position="fixed">
                <h1>Notes</h1>
            </div>

            <div data-role="content">
                <div id="addContainer">
                    <button id="addNoteBtn" data-role="button">Add Note</button>
                    <textarea id="noteInput" class="textarea" rows="10" cols="50"></textarea>

                    <button id="savenotesbtn" data-role="button">Save</button>-->
                </div>
                <div id="displayContainer">
                </div>
            </div>

CSS

#addContainer {
    margin: 20px 20px 50px 20px;
}

#displayContainer {
    margin: 20px 20px 20px 20px;
}

.noteDisplay {
    display: inline-block;
    color: white;
    background-color: #96c56f;
    width: 100%;
    padding: 5px, 0px, 5px, 0px;
    border: solid 2px black;
    border-radius: 5px;
    margin-bottom: 5px;
    word-break: break-all;
}

.textarea {
    width: 100%;
    height: 100%;
    font: 1em arial;
    color: rgba(50, 82, 50, 1.0);
}

.textarea:focus {
    color: rgba(50, 82, 50, 1.0);
    border: 2px solid #96c56f;
    box-shadow: 0px 1px 1px #888888;
}

JavaScript

$(document).ready(function () {
    var savesnotesbtn = document.getElementById("savenotesbtn");
    var addnotebtn = document.getElementById("addNoteBtn");

    var noteCount = localStorage.getItem("noteCount");

    if (noteCount === null) {
        noteCount = 0;
    }


    addnotebtn.addEventListener("click", addNotes);

    //ADD NOTES
    function addNotes() {
        noteCount++;
        var note = $("#noteInput").val();
        console.log("Note: " + note);
        console.log("Note Count: " + noteCount);
        var display = document.createElement("div");
        document.getElementById("displayContainer").appendChild(display);
        display.className = "noteDisplay";
        display.id = "note" + noteCount;
        $("#note" + noteCount).text(note);

        localStorage.setItem("noteCount", noteCount);
    }
});