Leaflet.js: click a polygon to remove the the layer and change it to new one

Question

I've been making a Leaflet map for a while and trying to figure out the way to make it so if I click one of the polygon in GeoJSON layer, it will remove the current layer and replace it with another layer.

Likewise, if I click it again, it will remove the new layer and replace it with previous layer.

I've been trying to tinker with different stuff but nothing works. This is one of my recent attempt.

<script type="text/javascript" src="provinces.js"></script>

<script>

    var map = L.map('map').setView([-2.5, 119], 5);

    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
        subdomains: 'abcd',
        maxZoom: 19
    }).addTo(map);


    // get color depending on population density value
    function getColor(d) {
        return d > 5000 ? '#800026' :
                d > 2500  ? '#BD0026' :
                d > 1000  ? '#E31A1C' :
                d > 500  ? '#FC4E2A' :
                            '#FFEDA0';
    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.kode)
        };
    }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#ccc',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }


    function addNewBoundary(e) { // this function doesn't do anything
            var newLayerBoundary = new L.geoJson();
            newLayerBoundary.addTo(map);

            $.ajax({
            dataType: "json",
            url: "province-details.geojson",
            success: function(data) {
                $(data.features).each(function(key, data) {
                    newLayerBoundary.addData(data);
                });
            }
            }).error(function() {});
    }

    function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: clearLayers // with this it just clears the layers before being clicked
    });
}

    geojson = L.geoJson(provinces, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

</script>

Answer 1

    var layers = [firstLayer,secondLayer]

    function switchLayers(){    
      if(map.haslayer(layers[firstLayer])){
          map.addLayer(layers[secondLayer]);
          map.removeLayer(layers[firstLayer]);
      }else{
        if(map.haslayer(layers[secondLayer])){
          map.addLayer(layers[firstLayer]);
          map.removeLayer(layers[secondLayer]);
      }    
 }