Highlight function using more then one layergroup

[soli004]

Have issues trying to get highlight function to work when splitting up a GeoJSON file in several layerGroups, tried to put in "var distance" but that did not work. The GeoJSON has multi polygons and I want to use the "function highlight" for showing the polygon that is clicked on as lots of polygons overlap each other and it can be hard to differentiate the polygon borders. I manage to do single layerGroup but would like it to work also with multiple layerGroups.

Below is the code i'm trying with...

    var dist_5 = new L.layerGroup();
    var dist_10 = new L.layerGroup();
    var dist_15 = new L.layerGroup();
    var dist_20 = new L.layerGroup();
    var dist_25 = new L.layerGroup();
    var dist_30 = new L.layerGroup();

        var highlight;
        var clearHighlight = function() {
            if (highlight) {
                distance.resetFeatureStyle(highlight);
            }
            highlight = null;
        };

    $.getJSON("../data/distance/distance.geojson", function(json) {

    var distance
    var vectorGrid_dist_5 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 20,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 300.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.3
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                        interactive: true,
                        getFeatureId: function(f) {
            return f.properties.name;
                         }
                       })

    var vectorGrid_dist_10 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 19,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 600.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.2
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                        interactive: true,
                        getFeatureId: function(f) {
            return f.properties.name;
                         }
                       })

    var vectorGrid_dist_15 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 18,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 900.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.1
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                        interactive: true,
                        getFeatureId: function(f) {
            return f.properties.name;
                         }
                       })

    var vectorGrid_dist_20 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 17,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 1200.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.1
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                        interactive: true,
                        getFeatureId: function(f) {
            return f.properties.name;
                         }
                       })

    var vectorGrid_dist_25 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 16,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 1500.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.1
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                        interactive: true,
                        getFeatureId: function(f) {
            return f.properties.name;
                         }
                       })

    var vectorGrid_dist_30 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 15,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 1800.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.1
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                        interactive: true,
                        getFeatureId: function(f) {
                return f.properties.name;
                         }
                       })

        function handleClick_dist(e) {
        var properties = e.layer.properties;
        L.popup()
        .setContent(
          "<h3>Ytor inom minuter</h3>" +
          "<b>Namn</b>: " + properties.name +
          "<br><b>Yta täcker inom</b>: " + properties.cost_level/60 + ' min' +
          "<br><b>Antal punkter</b>: " + properties.total_sum + ' st' +
          "<br><b>Summering</b>: " + properties.sum_details +
          "<br><b>Uppdaterad</b>: " + "<i>2019-05-17</i>"
          )
        .setLatLng(e.latlng)
        .openOn(map);

                clearHighlight();
                highlight = properties.name;
                distance.setFeatureStyle(highlight, {
                weight: 1,
                color: '#ffffff',
                opacity: 1,
                fillColor: '',
                fill: true,
                //radius: 6,
                fillOpacity: 0
                })

                L.DomEvent.stop(e);
    }

    vectorGrid_dist_5.on('click', handleClick_dist);      
    vectorGrid_dist_10.on('click', handleClick_dist);    
    vectorGrid_dist_15.on('click', handleClick_dist);
    vectorGrid_dist_20.on('click', handleClick_dist);      
    vectorGrid_dist_25.on('click', handleClick_dist);    
    vectorGrid_dist_30.on('click', handleClick_dist);

    vectorGrid_dist_5.addTo(dist_5)
    vectorGrid_dist_10.addTo(dist_10)
    vectorGrid_dist_15.addTo(dist_15)
    vectorGrid_dist_20.addTo(dist_20)
    vectorGrid_dist_25.addTo(dist_25)
    vectorGrid_dist_30.addTo(dist_30)

    map.on('click', clearHighlight);

    })
'''