Estoy haciendo su típico proyecto de práctica de lista de tareas pendientes, que está estructurado de una manera con la que la mayoría de ustedes probablemente estén familiarizados.

Tiene proyectos, y dentro de cada proyecto el usuario agrega tareas a través de un formulario emergente. cada tarea tiene un botón para eliminar o editar la tarea específica.

Cuando el usuario hace clic en editar en una tarea, se hace visible un formulario emergente con toda la información actual de la tarea, que se puede editar.

Al enviar el formulario emergente, funciona como se esperaba, actualizando la información, pero solo para la primera tarea que se edita. Las ediciones posteriores de diferentes tareas también editan aquellas que fueron editadas previamente.

Sé que esto tiene que ver con el detector de eventos para enviar el formulario emergente. La función en la que se declara el detector de eventos acepta un ID como argumento que identifica la tarea individual que se está editando. Parece que el detector de eventos se ejecuta para todas las tareas en las que se ha llamado previamente.

Esta función se llama a través del evento de clic del botón de edición.

Entiendo un poco lo que está sucediendo aquí, pero tengo dificultades para encontrar una solución.

¿Cómo puedo asegurarme de que el detector de eventos para enviar el formulario solo se ejecute para un elemento a la vez?

 let edit = document.createElement('button'); edit.textContent = 'Edit'; edit.classList.add('edit'); edit.id = `edit-${item.id}`; edit.addEventListener('click', (e) => { let taskId = document.getElementById(e.target.id).parentNode.id; setEditTaskFields(taskId); setEditTaskEvents(taskId); }) function setEditTaskEvents(taskId) { const project = selectDisplayedProject() const byId = project.items.map(e => e.id); const task = selectDisplayedProject().items.filter(task => task.id == taskId)[0]; document.getElementById('edit-task-form').addEventListener('submit', ()=> { let title = document.querySelector('#edit-task-form #title').value; let description = document.querySelector('#edit-task-form .description').value; let dueDate = document.querySelector('#edit-task-form #due-date').value; document.querySelectorAll('#edit-task-form .priority-container input').forEach(radio => { if (radio.checked) project.items[byId.indexOf(taskId)] = Item(title, description, dueDate, radio.value, selectDisplayedProject()); }); displayProject(selectDisplayedProject()); document.querySelector('.edit-task-popup').style.display = 'none'; })