How to access an object property inside a function that's inside a class - class

Question

I was trying to fetch the ID that has been created from a new class to use it as a data key, but I can't seem to be able to access it. How can be able to do so, kindly help.
My code has a class and a function that uses the class to create a new item and append it onto a main container in my html file.
I want to use the setAttribute method to add a data-key and link the ID that has been created by the function createProjectItem() in the class but it says that the new class(newProject) has not been defined.
class NewProject {
constructor(title) {
this.title = title;
}
createProjectItem() {
const projectArray = {
title: this.title,
id: Date.now(),
//ID TO BE ACCESSED ↑↑
};
projectArrayList.push(projectArray)
console.log(projectArrayList);
}
}
const createProjectList = document.querySelector(".create-projectList");
export default function createProjectFromClass() {
createProjectList.addEventListener("click",() => {
//Creates new class
const Titleinput = document.getElementById("project-title");
const titleText = Titleinput.value.trim();
if (titleText !== "") {
const newProject = new NewProject(titleText);
newProject.createProjectItem()
console.log(newProject.id);
Titleinput.value = "";
}
//Append new class to projects list
function appendProject() {
const container = document.querySelector(".projects");
const createProject = document.querySelector(".create-project")
const projectList = document.createElement("div");
projectList.setAttribute("class","project-list project-dynamic");
projectList.setAttribute("data-key",newProject.id)
//DATA KEY TO FETCH ID FROM NEW CLASS ↑↑
projectList.innerHTML = `
<p>Project name</p>
<i class="fa-solid fa-trash-can"></i>
`
container.insertBefore(projectList,createProject);
}
appendProject()
})
}
I access the property
let projectArrayList = [];
class NewProject {
constructor(title) {
this.title = title;
}
createProjectItem() {
const projectArray = {
title: this.title,
id: Date.now(),
};
projectArrayList.push(projectArray)
console.log(projectArrayList);
}
}
export default function createProjectFromClass() {
createProjectList.addEventListener("click",() => {
// Create a new project from project class
const Titleinput = document.getElementById("project-title");
const titleText = Titleinput.value.trim();
if (titleText !== "") {
const newProject = new NewProject(titleText);
newProject.createProjectItem()
console.log(newProject.id);
Titleinput.value = "";
}
//Append newProject to projects list
function appendProject() {
const container = document.querySelector(".projects");
const createProject = document.querySelector(".create-project")
const projectList = document.createElement("div");
projectList.setAttribute("class","project-list project-dynamic");
projectList.setAttribute("data-key","?????")
projectList.innerHTML = `
<p>Project name</p>
<i class="fa-solid fa-trash-can"></i>
`
container.insertBefore(projectList,createProject);
}
appendProject()
})
}