Trouble Separating Tags from Notes in JavaScript Notes App

Question

I've developed a note-taking app that allows users to create notes with tags. I want users to be able to add 5 additional tags for each newly created note. The main issue is that the tags are automatically included in the newly created note instead of being stored separately. Despite several hours of effort, I haven't been successful in solving the problem. I'm seeking a solution to ensure that the tags are stored and displayed separately from the notes.

Implemented logic to extract and store tags separately from notes upon note creation. Adjusted the code to ensure that tags are not automatically included in the newly created note. Utilized event listeners to capture tag input and display them separately from the notes. Employed localStorage to persistently store both notes and tags. Updated the display function to show tags independently of notes.I've deleted the code now, as either the 'Add new Note' button didn't work, or when I pressed 'Enter' on the tags, they didn't get added anymore. I haven't been working with JS for long and I'm trying to master this language better through smaller projects, but I just can't seem to make progress here. Despite these attempts, the problem persists, and tags continue to be inadvertently included in the newly created notes.

HTML:

<div class="popup-box">
        <div class="popup">
          <div class="content">
            <header>
              <p></p>
              <i class="uil uil-times"></i>
            </header>
            <form action="#">
              <div class="row title">
                <label>Title</label>
                <input type="text" spellcheck="false" placeholder="Add a title...">
              </div>
              <div class="row description">
                <label>Description</label>
                <textarea spellcheck="false" placeholder="Add a description..."></textarea>
              </div>
              <div class="row wrapper-tag">
                <div class="title-tags">
                  <label>Tags</label>
                </div>
                <div class="content-tags">
                  <p>Press enter or add a comma after each tag</p>
                  <ul><input type="text" spellcheck="false" class="tag-input" placeholder="Add a tag..."></ul>
                </div>
                <div class="details">
                  <p><span>5</span> tags are remaining</p>
                </div>
              </div>
              <button></button>
            </form>
          </div>
        </div>
      </div>
      <div class="wrapper">
        <li class="add-box">
          <div class="icon"><i class="uil uil-plus"></i></div>
          <p>Add new note</p>
        </li>
      </div>

JS:

const addBox = document.querySelector(".add-box"),
popupBox = document.querySelector(".popup-box"),
popupTitle = popupBox.querySelector("header p"),
closeIcon = popupBox.querySelector("header i"),
titleTag = popupBox.querySelector("input"),
descTag = popupBox.querySelector("textarea"),
addBtn = popupBox.querySelector("button");

const months = ["January", "February", "March", "April", "May", "June", "July",
              "August", "September", "October", "November", "December"];

const notes = JSON.parse(localStorage.getItem("notes") || "[]");

let isUpdate = false, updateId;
addBox.addEventListener("click", () => {
    popupTitle.innerText = "Add a new Note";
    addBtn.innerText = "Add Note";
    popupBox.classList.add("show");
    document.querySelector("body").style.overflow = "hidden";
    if(window.innerWidth > 660) titleTag.focus();
});

closeIcon.addEventListener("click", () => {
    isUpdate = false;
    titleTag.value = descTag.value = "";
    popupBox.classList.remove("show");
    document.querySelector("body").style.overflow = "auto";
});

function showNotes() {
    if(!notes) return;
    document.querySelectorAll(".note").forEach(li => li.remove());
    notes.forEach((note, id) => {
        let filterDesc = note.description.replaceAll("\n", '<br/>');
        let liTag = `<li class="note">
                        <div class="details">
                            <p>${note.title}</p>
                            <span>${filterDesc}</span>
                        </div>
                        <div class="bottom-content">
                            <span>${note.date}</span>
                            <div class="settings">
                                <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
                                <ul class="menu">
                                    <li onclick="updateNote(${id}, '${note.title}', '${filterDesc}')"><i class="uil uil-pen"></i>Edit</li>
                                    <li onclick="deleteNote(${id})"><i class="uil uil-trash"></i>Delete</li>
                                </ul>
                            </div>
                        </div>
                    </li>`;
        addBox.insertAdjacentHTML("afterend", liTag);
    });
}


showNotes();
function showMenu(elem) {
    elem.parentElement.classList.add("show");
    document.addEventListener("click", e => {
        if(e.target.tagName != "I" || e.target != elem) {
            elem.parentElement.classList.remove("show");
        }
    });
}
function deleteNote(noteId) {
    let confirmDel = confirm("Are you sure you want to delete this note?");
    if(!confirmDel) return;
    notes.splice(noteId, 1);
    localStorage.setItem("notes", JSON.stringify(notes));
    showNotes();
}
function updateNote(noteId, title, filterDesc) {
    let description = filterDesc.replaceAll('<br/>', '\r\n');
    updateId = noteId;
    isUpdate = true;
    addBox.click();
    titleTag.value = title;
    descTag.value = description;
    popupTitle.innerText = "Update a Note";
    addBtn.innerText = "Update Note";
}
addBtn.addEventListener("click", e => {
    e.preventDefault();
    let title = titleTag.value.trim(),
    description = descTag.value.trim();
    if(title || description) {
        let currentDate = new Date(),
        month = months[currentDate.getMonth()],
        day = currentDate.getDate(),
        year = currentDate.getFullYear();
        let noteInfo = {title, description, date: `${month} ${day}, ${year}`}
        if(!isUpdate) {
            notes.push(noteInfo);
        } else {
            isUpdate = false;
            notes[updateId] = noteInfo;
        }
        localStorage.setItem("notes", JSON.stringify(notes));
        showNotes();
        closeIcon.click();
    }
});

// TAG
document.addEventListener("DOMContentLoaded", function() {
    const tagInput = document.querySelector('.tag-input');
    const tagsList = document.querySelector('.content-tags ul');
    const tagsRemaining = document.querySelector('.details span');
    let tagsCount = 0;

    tagInput.addEventListener('keydown', function(event) {
        if ((event.key === 'Enter' || event.key === ',') && tagInput.value.trim() !== '') {
            event.preventDefault();
            const tagText = tagInput.value.trim();
            if (tagsCount < 5) {
                const tagItem = document.createElement('li');
                tagItem.textContent = tagText;
                tagsList.appendChild(tagItem);
                tagInput.value = '';
                tagsCount++;
                tagsRemaining.textContent = 5 - tagsCount;
            } else {
                alert('You can only add up to 5 tags!');
            }
        }
    });

    tagsList.addEventListener('click', function(event) {
        if (event.target.tagName === 'LI') {
            event.target.remove();
            tagsCount--;
            tagsRemaining.textContent = 5 - tagsCount;
        }
    });
});