How can i target appended items one by one in javascript?

Question

I created a simple new tab page similar to web browsers, but when I create a new tab and press the x icon to triger closetab() it closes all the tabs and does not delete them in order one by one. How do i make each of appended items unique?

JS:

function addTab() {
    
        var img = document.createElement("img");
        img.src = "resources/img/delete-icon.svg";
    
        img.className = 'deleteicon';
        img.id = "deletetab";
        img.onclick = closeTab;
    
        var ulLocation = document.getElementsByClassName('abc')[0];
        var whereTab = document.getElementById('listid');
    
        var addTab = document.createElement('li');
        addTab.className = 'first-tab';
        addTab.id = "listid";
    
        addTab.className = 'active';
      
        addTab.innerHTML = "mozilla-firefox/newtab";
        addTab.appendChild(img2);
    
        ulLocation.appendChild(addTab);
    
        addTab.appendChild(img);
    }

function closeTab() {
    var whereTab = document.getElementById('listid');
    if (whereTab.style.display == 'block') {
        whereTab.style.display = 'none';
    } else {
        whereTab.style.display = "none";
    }
}