I’m trying to make to-do app using JS but when I add to-do to one instance of the project then it is also added to the other project,worst part is that when I asign to the one then the task is DOUBLED so instead of adding one task to the current project it is added twice and x4 to previously added project.I know it’s probably problem with my event listeners or how I pass the project instance down my functions but I can’t find a way to fix this.

import { clearElement } from "./clearElement"
import { projectList } from "./projectList";
import { openProject } from "./openProject";
export function displayProjects(){
    const buttonsDiv=document.querySelector(".buttons");
    clearElement(buttonsDiv);
   projectList.forEach((project)=>{
    const projectButton=document.createElement("button");
    projectButton.textContent=project.title;
    projectButton.addEventListener("click",(e)=>openProject(e));
    buttonsDiv.appendChild(projectButton);
   })
   

}

import { titleParagraphContent } from "./titleParagraphContent";
import { showTaskModal } from "./showTaskModal";
import { addNewTask } from "./addNewTask";
import { clearElement } from "./clearElement";
export function displayProject(project){
    const projectHeader=document.querySelector(".project-header");
    const addTaskButton=document.createElement("button");
    const addTaskButtonDiv=document.querySelector(".Task-button");

    clearElement(addTaskButtonDiv);
    projectHeader.textContent=titleParagraphContent;
    addTaskButton.classList.add("add-task");
    addTaskButton.textContent="+";
    addTaskButton.addEventListener("click",showTaskModal);
    addTaskButtonDiv.appendChild(addTaskButton);

    const submitTaskButton=document.querySelector("#add-new-task");
    submitTaskButton.removeEventListener("click",addNewTask);
    submitTaskButton.addEventListener("click",(e)=>addNewTask(e,project));

}

import { projectList } from "./projectList";
import { clearElement } from "./clearElement";
import { displayProject } from "./displayProject";
import { displayTasks } from "./displayTasks";
export function openProject(e){

    const button=e.target;
    const projectName=button.textContent;
    const titleDiv=document.querySelector(".title");

    let index=_.findIndex(projectList,function (project){ return project.title===projectName});
    let projectToDisplay=projectList[index];
    clearElement(titleDiv);
    titleDiv.textContent=projectName;
    displayProject(projectToDisplay);
    displayTasks(projectToDisplay);



}

import { displayTasks } from "./displayTasks";
import { Task } from "./task";
export function addNewTask(e,project){

    e.preventDefault();
    let title=document.getElementById("ftitle").value;
    let description=document.getElementById("fdesc").value;
    let dueDate=document.getElementById("fdate").value;
    let priority=document.getElementById("fpriority").value;

    let task=new Task(title,description,dueDate,priority);
    project.addToProject(task);
    displayTasks(project);
    


}

import { Project } from "./project"
import { projectList } from "./projectList";
import { displayProjects } from "./displayProjects";
export function addNewProject(title){
    const project=new Project(title);
    projectList.push(project);
    
    displayProjects();


}

import { clearElement } from "./clearElement";

export function displayTasks(project){
    const taskList=document.createElement("ul");
    const tasksDiv=document.querySelector(".tasks");
    clearElement(tasksDiv);
    clearElement(taskList);
    project.projectTasks.forEach(element => {
        const li=document.createElement("li")
        const liContext=element.title;
        li.textContent=liContext;
        taskList.appendChild(li);
    });
    tasksDiv.appendChild(taskList);

}

export class Task{
    constructor(title,description,dueDate,priority){
        this.title=title;
        this.description=description;
        this.dueDate=dueDate;
        this.priority=priority;
        this.isDone=false;
    }
    setDone(){
        this.isDone=true;
        
    }
    
}

export class Project{
    constructor(title){
        this.title=title;
        this.projectTasks=[];
    }
    addToProject(task){
        this.projectTasks.push(task);
    }
   
}

I’ve tried to clearing HTLM elements but it didn’t work,when I unsubscribed to the event,1 additional copy stopped apearing but after another task adition it was like before.