class toggle is adding the same class instead of toggling

Question

I am trying to switch between a leaflet map and a list. It is working fine untill the code is compiled by webpack. After clicking on an item the map shows up as it should. But when I close the map with the close button, I have map.remove() which removes the map but the class toggles do not toggle but instead they add the already existing class. The function below runs to open the map and toggles correctly. And it runs when closing the map, but then the same toggles do not run correctly and adds the same class, as you can see in the photo below. The menu class is also duplicated which it should not. Before I compile with webpack it does run correctly. Thanks!

const mapHandler = async id => {
let brewery;
if (id) {
    brewery = await fetchBreweries.get('/' + id);
    if (!brewery.latitude || !brewery.longitude) {
        alert('Sorry, this entry has no coordinates.');
        return;
    };
};
if (!id) {
    //no id means we are clicking the closehandler, so enable buttons in footer and remove the map
    footerBtns.map(btn => btn.disabled = false);
    //remove it before toggling classes or it will throw the can't find it error
    if (map) map.remove();
};  
mapEl.classList.toggle('not-visible');
list.classList.toggle('not-visible');
mapEl.classList.toggle('visible');
list.classList.toggle('visible');
if (!id) return;
//there is an id, so we are going to build the map to show it
//disable buttons in the footer so we cannot click on them when the map is shown
footerBtns.map(btn => btn.disabled = true);
if (aroundMyLocation) {
    //if above flag is true than we want to build the map, show own location and then fly to brewery location
    buildMap(myLocation);
    setTimeout(() => {
        map.flyTo([brewery.latitude, brewery.longitude], 12, {duration: 3})
    }, 800);
    setTimeout(() => {
        L.marker([brewery.latitude, brewery.longitude])
            .addTo(map)
            .bindPopup(brewery.name)
            .openPopup();
    }, 1200);
} else {
    //flag is false so we only want to show the brewery location
    buildMap({lat: brewery.latitude, lng: brewery.longitude});
    L.marker([brewery.latitude, brewery.longitude])
        .addTo(map)
        .bindPopup(brewery.name)
        .openPopup();
};
//show brewery details in bottom right box
details.innerHTML = `
    <h3>${brewery.name}</h3>
    <p>${brewery.phone || 'number unknown'}</p>
    <p>${brewery.street || 'street unknown'}</p>
    <p>${brewery.city || 'city unknown'}</p>
`;   

};

Answer 1

My script was being added twice with webpack. After adding inject: false to HtmlWebpackPlugin in my config file it was running as it should. I was trying to do a simple project so I could focus on learning webpack, serviceworkers and testing. A bit too much all at once probably...