button function executes multiple times after the first time

I’m currently working on a todolist project and I’ve run into a problem adding new task to the project. When I submit new task for the first time, it worked fine and the task gets pushed into myProjects array. Next time I submit another task, it pushes multiple times of the same task into myProjects array.

Here’s my code:

const mainContent = document.querySelector('#main');



export default function renderMain(event) { //render project from sidebar to mainContent body



    mainContent.textContent = '';
    mainContent.appendChild(addTaskModal); //dialog to input new task and its priority
   
    let index = parseInt(event.target.id.split('-')[1]);

   //try creating the addTask button here.
    
    const projectCard = document.createElement('div');
    projectCard.classList.add('card');

    const projectCardHeader = document.createElement('h3');
    projectCardHeader.classList.add('cardheader');
    projectCardHeader.textContent =  myProjects[index].name
   projectCard.appendChild(projectCardHeader);    
   
   const projectDue = document.createElement('div');
    projectDue.textContent = myProjects[index].due;
    projectDue.classList.add('date');
    projectCard.appendChild(projectDue);

 

       ** submitNewTaskBtn.addEventListener('click', ()=>{
            
            if (!newTaskInput.value || !newPriorityInput.value) {
                alert('please enter the missing value.')
                return;
            }
            else if (myProjects[index].hasOwnProperty('tasks') === false) { //if project has no tasks property, assign tasks property
                myProjects[index].tasks =[(createTask(newTaskInput.value, newPriorityInput.value))];
                
                localStorage.setItem('projects', JSON.stringify(myProjects));
                addTaskModal.close();
                renderMain(event);
            }
            
            myProjects[index].tasks.push(createTask(newTaskInput.value, newPriorityInput.value));
            
            localStorage.setItem('projects', JSON.stringify(myProjects));
            
            addTaskModal.close();
           
            renderMain(event);
            
        })
    **
  
   for (let i = 0; i < myProjects[index].tasks?.length; i++) {
    
    const tasks = document.createElement('div');
   const deleteBtn = document.createElement('button');
   deleteBtn.textContent = 'Delete Task';
   deleteBtn.addEventListener('click', ()=>{
    myProjects[index].tasks.splice(i, 1);
    localStorage.setItem('projects', JSON.stringify(myProjects));
    renderMain(event);
   })
 
//when we want to update after delete, just store with same "key" and the "key" will be updated.
   
  
   tasks.textContent = myProjects[index].tasks[i].name;
   tasks.classList.add('tasks');
   tasks.appendChild(deleteBtn);
   projectCard.appendChild(tasks);
  
}
const addTaskBtn = document.createElement('button');
addTaskBtn.textContent = "Add Task";
mainContent.appendChild(addTaskBtn);
addTaskBtn.addEventListener('click', ()=>{
    
    addTaskModal.showModal();

});
    mainContent.appendChild(addTaskBtn);
    mainContent.appendChild(projectCard)

}

Specifically, this is the part of the code that I’m having a problem with:

  submitNewTaskBtn.addEventListener('click', ()=>{

            if (!newTaskInput.value || !newPriorityInput.value) {
                alert('please enter the missing value.')
                return;
            }
            else if (myProjects[index].hasOwnProperty('tasks') === false) { //if project has no tasks property, assign tasks property
                myProjects[index].tasks =[(createTask(newTaskInput.value, newPriorityInput.value))];

                localStorage.setItem('projects', JSON.stringify(myProjects));
                addTaskModal.close();
                renderMain(event);
            }

            myProjects[index].tasks.push(createTask(newTaskInput.value, newPriorityInput.value));

            localStorage.setItem('projects', JSON.stringify(myProjects));

            addTaskModal.close();

            renderMain(event);

        })

I’m not sure why it executes multiple times after the first submit, and the number of times doubles after every click.. 2,4,8,16 and so on. Any inputs would be very appreciated. Thank you!