Categorized Card Management with Popup Selection

I’m trying to use either filter or find to be able to get a card, and these cards have unique id because they’re all generated from a particular card.

In the context of what I want is that, upon selecting a card from the addBtn (the main source of the cards), I want to get a pop-up option that I can select what type of card I want. For example, ‘Personal’ and ‘Work’. If I select ‘work’ the card that appears is solely linked to work, same as the personal. When it is saved it appears in ‘work’ and there is another button where both ‘personal’ and ‘work’ is called ‘All’ and when it’s clicked both personal and work appears on the same page.

I tried these codes. The trash works, addBtn works but the personal and work doesn’t

let recentCardIds = []; let personalCardIds = []; let workCardIds = []; let trashCardIds = []; sidebars.forEach((sidebar) => { sidebar.addEventListener(“click”, () => { document.querySelectorAll(“.active”)?.classList.remove(“active”); sidebar.classList.add(“active”); }); }); const renderCards = (cardsToRender, filter = null) => { // cardsToRender = cards.filter((card) => card.isDeleted === false); let arr = cardsToRender; if (filter) { // cardsToRender = cardsToRender.filter((card) => { switch (filter) { case “recentItems”: arr = cardsToRender.filter((card) => card.isDeleted === false); break; case “personalItems”: arr = cardsToRender.filter((card) => card.isDeleted === false); break; case “workItems”:your text arr = cardsToRender.filter((card) => card.isDeleted === false); break; case “trashItems”: arr = cardsToRender.filter((card) => card.isDeleted === true); break; default: arr = cardsToRender.filter((card) => card.isDeleted === false); } // }); } else { arr = cardsToRender.filter((card) => card.isDeleted === false); } console.log(arr); cr.innerHTML = arr.map((item, indx) => { personal work }); renderCards(cards, “recentItems”); const recent = document .getElementById(“recentBtn”) .addEventListener(“click”, () => renderCards(cards, “recentItems”)); const personal = document .getElementById(“personalBtn”) .addEventListener(“click”, () => renderCards(cards, “personalItems”)); const work = document .getElementById(“workBtn”) .addEventListener(“click”, () => renderCards(cards, “workItems”)); const trash = document .getElementById(“trashBtn”) .addEventListener(“click”, () => { renderCards(cards, “trashItems”}); `