How can I modify my JavaScript code to remove a specific selected area when right-clicked?

With the code below, I can select areas on an image. However, there is an issue when trying to remove a selected area. Let’s say I’ve created 4 areas, and I want to remove the second one. When I right-click on the second area and select “remove,” it actually removes the most recently added area, and the “remove” action only works once. When I try to remove it again, it doesn’t work.

How can I modify this code so that it only removes the area that was clicked on, and works correctly for each area individually?

Here’s the code:

const imageContainer = document.getElementById('image-container');
const image = document.getElementById('image');
const selectedAreasList = document.getElementById('selected-areas');

let isDragging = false;
let startX, startY, endX, endY;
let currentSelection;
let selections = []; // Seçilmiş alanları saklamak için bir dizi

imageContainer.addEventListener('mousedown', (e) => {
    if (e.button !== 0) return; // Sadece sol tıklama olayını ele al
    if (e.target.classList.contains('selection-box')) {
        e.preventDefault();
        return;
    }
    isDragging = true;
    startX = e.clientX - imageContainer.getBoundingClientRect().left;
    startY = e.clientY - imageContainer.getBoundingClientRect().top;
    currentSelection = document.createElement('div');
    currentSelection.className = 'selection-box';
    currentSelection.style.left = startX + 'px';
    currentSelection.style.top = startY + 'px';
    imageContainer.appendChild(currentSelection);
    selections.push(currentSelection); // Yeni seçili alanı diziye ekleyin
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    endX = e.clientX - imageContainer.getBoundingClientRect().left;
    endY = e.clientY - imageContainer.getBoundingClientRect().top;

    let width = endX - startX;
    let height = endY - startY;

    // Genişlik ve yükseklik en az 10 piksel olacak şekilde sınırla
    width = Math.max(width, 10);
    height = Math.max(height, 10);

    currentSelection.style.left = startX + 'px';
    currentSelection.style.top = startY + 'px';
    currentSelection.style.width = width + 'px';
    currentSelection.style.height = height + 'px';
    currentSelection.style.display = 'block';
});

document.addEventListener('mouseup', () => {
    if (isDragging) {
        isDragging = false;
        offsetX = currentSelection.getBoundingClientRect().left - imageContainer.getBoundingClientRect().left;
        offsetY = currentSelection.getBoundingClientRect().top - imageContainer.getBoundingClientRect().top;
        currentSelection.style.cursor = 'grab';

        // Sağ tıklama menüsünü seçilen alana ekleyin
        currentSelection.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            const contextMenu = document.createElement('div');
            contextMenu.className = 'context-menu';
            contextMenu.innerHTML = '<div class="context-menu-item">Kaldır</div>';
            contextMenu.style.left = e.clientX + 'px'; // Mouseun X konumu
            contextMenu.style.top = e.clientY + 'px'; // Mouseun Y konumu
            document.body.appendChild(contextMenu);

            // Kaldır seçeneğine tıklandığında seçimi kaldırın
            const removeItem = contextMenu.querySelector('.context-menu-item');
            removeItem.addEventListener('click', () => {
                imageContainer.removeChild(currentSelection); // Seçim kutusunu kaldır
                const index = selections.indexOf(currentSelection);
                if (index !== -1) {
                    selections.splice(index, 1); // Seçim kutusunu diziden kaldır
                }
                document.body.removeChild(contextMenu); // Sağ tık menüsünü kaldır
            });

            // Sağ tık menüsünü kaybolmasını sağlamak için belgeye bir tıklama olayı ekleyin
            document.addEventListener('click', () => {
                document.body.removeChild(contextMenu);
            });
        });

        selectedAreasList.innerHTML += `<li>(${startX}, ${startY}) - (${endX}, ${endY})</li>`;
    }
});