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.