I’m currently working on a To-do-list from the odin project. As per the instructions, my todolist can create a new project, which we can then add tasks to the project. I now have a sidebar listing all existing projects, and when I click on any of the projects, it renders the details of the project onto the main body. I’ve attached screenshots of the page

before i click on a project

after i click on a project

I’m currently having trouble trying to add new tasks to the project that’s active on the main body as I can’t get its index.

Here’s my code that renders the project to the body:

import { addTaskModal } from './addTaskModal.js';
import { myProjects } from './myProjects.js';

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]);
   
   
    
    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);

       
    
  
    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)



}

Here’s the code for myProjects array for context:

let myProjects = JSON.parse(localStorage.getItem('projects')) || [
    {
        name: "Go to supermarket",
        due: "12/2/25",
        tasks: [
                    {
                        name: "Buy apples",
                        priority: "high"
                    },
                    {
                        name: "Buy Eggs",
                        priority: "medium"
                    }
                ]
    },
    {
        name: "Clean the house",
        due: "13/2/25",
        tasks: [
                    {
                        name: "Sweep and mop the floor",
                        priority: "high"
                    },
                    {
                        name: "Do laundry",
                        priority: "high"
                    }
                ]
    }
];

export { myProjects };

So in my addTaskModal.js module, I’ve created a dialog popup for users to input the details of the tasks to be added to the active project.
But I’ve been stuck for hours and I can’t figure out how to get the index of the project that’s rendered on the main page.

Any inputs would be very appreciated. Thank you!