How to target a specific element of an array?

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.

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.

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
};