I’m working on the To-Do List app for The Odin Project.

I’m trying to have btnIndex update whenever a new btn (of detailsBtns) is clicked.

btnIndex does not seem to update after the first click, then as a result the same taskObj is being overwritten instead of each appropriate taskObj in relation to it’s index.

function detailsModal () {
    const detailsModalContainer = document.getElementById('detailsModalContainer');
    const detailsBtns = document.querySelectorAll('.detailsBtn');
    const detailsTitle = document.getElementById('detailsTitle');
    const detailsDetails = document.getElementById('detailsDetails');
    const detailsDate = document.getElementById('detailsDate');

    for (let btn of detailsBtns) {
        btn.addEventListener('click', () => {
            detailsModalContainer.style.display = 'block';

            let folderObj = getSelectedFolder();
            let tasks = folderObj.getTasks();
            let btnsArray = Array.from(detailsBtns);
            let btnIndex = btnsArray.indexOf(btn);
            let taskObj = tasks[btnIndex];

            detailsTitle.value = taskObj.title;
            detailsDetails.value = taskObj.details;
            detailsDate.value = taskObj.date;
            let taskUrgency = taskObj.urgency;

            const urgencyInputs = document.querySelectorAll(`input[name='detailsUrgency']`);
            const urgencyLabelLow = document.querySelector('.detailsUrgencyLow');
            const urgencyLabelMedium = document.querySelector('.detailsUrgencyMedium');
            const urgencyLabelHigh = document.querySelector('.detailsUrgencyHigh');

            setUrgency(urgencyLabelLow, urgencyLabelMedium, urgencyLabelHigh, taskUrgency);

            changeUrgency(urgencyLabelLow, urgencyLabelMedium, urgencyLabelHigh, urgencyInputs);

                //currently submit button is overwriting the same taskObj rather than selecting a new 
                //taskObj when a new btn is clicked

            submitDetailsModal(btnIndex, taskUrgency);
        })

    }

}

function submitDetailsModal (btnIndex, taskUrgency) {
    const submitBtn = document.getElementById('detailsSubmit');

    submitBtn.addEventListener('click', (event) => {
        let title = detailsTitle.value;
        let details = detailsDetails.value;
        let date = detailsDate.value;
        let urgency = '';

        if(document.querySelector('input[name="detailsUrgency"]:checked')){
            urgency = document.querySelector('input[name="detailsUrgency"]:checked').value;
        } else {
            urgency = taskUrgency;
        }

        let folderObj = getSelectedFolder();
        let tasks = folderObj.getTasks();
        let updatedTask = new Task(title, details, date, urgency);

        tasks[`${btnIndex}`] = updatedTask;

        detailsModalContainer.style.display = "none";

        // console.log(event.bubbles);
        console.log(tasks)
        console.log(btnIndex)

        event.stopImmediatePropagation();
        });
}

I’ve tried declaring the local variables outside of the click event with no difference made.

Right now the detailsModal() function is invoked immediately upon page loading, I tried running it each time a btn was clicked with no impact either.