Function with map.addLayer() and map.removeLayer() not working

I am trying to create buttons that add and remove layer groups and I am not having any luck. Can you take a look at how I have this set up?

    var main = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: '<a href="https://www.openstreetmap.org/">OpenStreetMap</a>, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, <a href="https://www.mapbox.com/">Mapbox</a>',
                maxZoom: 18,
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1,
                accessToken: 'pk.eyJ1IjoibWljaGFlbGNwIiwiYSI6ImNrN3V5eHVwNTAxMzgza2x1d2s1N3lkbmIifQ.Rmgw9tQHXVTL5_w6jvGjlw'
        });

    var map = L.map('mapid', {
                 center: [59.3307804,18.0569225],
                 zoom: 11,
                 layers: [main],
                 fullscreenControl: true,
                 zoomControl: false,
                 dragging: !L.Browser.mobile
        });
     
var zoomHome = new L.Control.zoomHome();
zoomHome.addTo(map);

var baseMaps = {
       "All Activities": allWater,
       "<span id='icons1'>Beaches</span>": allBeaches,
       "<span id='icons2'>Wading pools</span>": waterR,
       "<span id='icons3'>Swimming pools</span>": pools
  };

var control=  L.control.layers(baseMaps, null, {collapsed:false});
control.addTo(map);

Here are the functions I have written but they don’t seem to work. I am using onclick= to trigger the functions

    function WaterFilter0(){
  map.addLayer(allWater)
    if(map.hasLayer(allBeaches)){
        map.removeLayer(allBeaches);
      } else if(map.hasLayer(waterR)){
        map.removeLayer(waterR);
      } else if(map.hasLayer(pools)){
        map.removeLayer(pools);
    }
}

function WaterFilter1(){
  map.addLayer(allBeaches)
    if(map.hasLayer(allWater)){
        map.removeLayer(allWater);
      } else if(map.hasLayer(waterR)){
        map.removeLayer(waterR);
      } else if(map.hasLayer(pools)){
        map.removeLayer(pools);
    }
}

function WaterFilter2(){
  map.addLayer(waterR)
    if(map.hasLayer(allWater)){
        map.removeLayer(allWater);
      } else if(map.hasLayer(allBeaches)){
        map.removeLayer(allBeaches);
      } else if(map.hasLayer(pools)){
        map.removeLayer(pools);
    }
}

function WaterFilter3(){
  map.addLayer(pools)
    if(map.hasLayer(allWater)){
        map.removeLayer(allWater);
      } else if(map.hasLayer(allBeaches)){
        map.removeLayer(allBeaches);
      } else if(map.hasLayer(waterR)){
        map.removeLayer(waterR);
    }
}
</script>

This is code is live here: https://www.leksplay.com/tabs