I have two polygon layers (polygons) that overlap. I've created a leaflet map using qgis2web. The issues is that, if I click on the overlapping area, the popup only shows information for the topmost layer.

Is there a simple way to show information for all the overlapping features?

  <div id="map">
    </div>
    <script src="js/qgis2web_expressions.js"></script>
    <script src="http://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="js/leaflet.rotatedMarker.js"></script>
    <script src="js/leaflet.pattern.js"></script>
    <script src="js/leaflet-hash.js"></script>
    <script src="js/Autolinker.min.js"></script>
    <script src="js/rbush.min.js"></script>
    <script src="js/labelgun.min.js"></script>
    <script src="js/labels.js"></script>
    <script src="data/polygonlayer1_0.js"></script>
    <script src="data/polygonlayer2_1.js"></script>
    <script>
    var map = L.map('map', {
        zoomControl:true, maxZoom:28, minZoom:1
    }).fitBounds([[43.3692589418,-4.4186720562],[43.3951151,-4.35991701571]]);
    var hash = new L.Hash(map);
    map.attributionControl.addAttribution('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a>');
    var bounds_group = new L.featureGroup([]);
    var basemap0 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 28
    });
    basemap0.addTo(map);
    function setBounds() {
    }
    function pop_polygonlayer1_0(feature, layer) {
        var popupContent = '<table>\
                <tr>\
                    <th scope="row">id</th>\
                    <td>' + (feature.properties['id'] !== null ? Autolinker.link(String(feature.properties['id'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Name</th>\
                    <td>' + (feature.properties['Name'] !== null ? Autolinker.link(String(feature.properties['Name'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Code</th>\
                    <td>' + (feature.properties['Code'] !== null ? Autolinker.link(String(feature.properties['Code'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Type</th>\
                    <td>' + (feature.properties['Type'] !== null ? Autolinker.link(String(feature.properties['Type'])) : '') + '</td>\
                </tr>\
            </table>';
        layer.bindPopup(popupContent, {maxHeight: 400});
    }

    function style_polygonlayer1_0_0() {
        return {
            pane: 'pane_polygonlayer1_0',
            opacity: 1,
            color: 'rgba(0,0,0,1.0)',
            dashArray: '',
            lineCap: 'butt',
            lineJoin: 'miter',
            weight: 1.0, 
            fill: true,
            fillOpacity: 1,
            fillColor: 'rgba(255,207,32,0.701960784314)',
        }
    }
    map.createPane('pane_polygonlayer1_0');
    map.getPane('pane_polygonlayer1_0').style.zIndex = 400;
    map.getPane('pane_polygonlayer1_0').style['mix-blend-mode'] = 'normal';
    var layer_polygonlayer1_0 = new L.geoJson(json_polygonlayer1_0, {
        attribution: '<a href=""></a>',
        pane: 'pane_polygonlayer1_0',
        onEachFeature: pop_polygonlayer1_0,
        style: style_polygonlayer1_0_0,
    });
    bounds_group.addLayer(layer_polygonlayer1_0);
    map.addLayer(layer_polygonlayer1_0);
    function pop_polygonlayer2_1(feature, layer) {
        var popupContent = '<table>\
                <tr>\
                    <th scope="row">id</th>\
                    <td>' + (feature.properties['id'] !== null ? Autolinker.link(String(feature.properties['id'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Name</th>\
                    <td>' + (feature.properties['Name'] !== null ? Autolinker.link(String(feature.properties['Name'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Code</th>\
                    <td>' + (feature.properties['Code'] !== null ? Autolinker.link(String(feature.properties['Code'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <th scope="row">Type</th>\
                    <td>' + (feature.properties['Type'] !== null ? Autolinker.link(String(feature.properties['Type'])) : '') + '</td>\
                </tr>\
            </table>';
        layer.bindPopup(popupContent, {maxHeight: 400});
    }

    function style_polygonlayer2_1_0() {
        return {
            pane: 'pane_polygonlayer2_1',
            opacity: 1,
            color: 'rgba(0,0,0,1.0)',
            dashArray: '',
            lineCap: 'butt',
            lineJoin: 'miter',
            weight: 1.0, 
            fill: true,
            fillOpacity: 1,
            fillColor: 'rgba(255,89,89,0.701960784314)',
        }
    }
    map.createPane('pane_polygonlayer2_1');
    map.getPane('pane_polygonlayer2_1').style.zIndex = 401;
    map.getPane('pane_polygonlayer2_1').style['mix-blend-mode'] = 'normal';
    var layer_polygonlayer2_1 = new L.geoJson(json_polygonlayer2_1, {
        attribution: '<a href=""></a>',
        pane: 'pane_polygonlayer2_1',
        onEachFeature: pop_polygonlayer2_1,
        style: style_polygonlayer2_1_0,
    });
    bounds_group.addLayer(layer_polygonlayer2_1);
    map.addLayer(layer_polygonlayer2_1);
    var baseMaps = {};
    L.control.layers(baseMaps,{'<img src="legend/polygonlayer2_1.png" /> polygonlayer2': layer_polygonlayer2_1,'<img src="legend/polygonlayer1_0.png" /> polygonlayer1': layer_polygonlayer1_0,},{collapsed:false}).addTo(map);
    setBounds();
    </script>

From what I've read here, I think I should probably use the point in polygon plugin?

This is my first week working with Leaflet and I am a bit lost. Thank you in advance.