GeoJSON filtering based on properties in Leaflet not working

Good afternoon, I am trying to filter my geoJSON layer based on those properties:

    
 Infill
                            
                                All
                                Completed

                            

where my .geojson file looks as follows:

  {
  "type": "Feature",
  "properties": {
    "Owner": 174556,
    "Type": "Infill",
    "Status": "Completed_and_invoiced",
    "Ticket_ID": "VM/TIK/808571",

    "NBU": 174556,
    "Address": "70 Lackford Ave",
    "Postcode": "SO40 ",
    "Date_issued_from_VM": "",
    "Asbestos_rep": "N/A",
    "Planner": "Richard Dean",
    "Surveyor": "Richard Dean",
    "STATS_Applied_for_date": "N/A",
    "STATS_compleeted": "N/A",
    "ACTUAL_Internal_QC_Date": "Wednesday, May 29, 2019",

    "VM_ECD_date": "",
    "Client_Home_Count": 370,
    "Post_Survey_Home_Count": 370,
    "General_notes": "Emailed Elec on 9.5 - AJ to chase 13.05",
    "Directory": "file://Z:\\\\Fixed Line\\\\Design & Build\\\\2. 
    Clients\\\\Virgin Media\\\\1. Small Infill Projects\\\\2. NBUs\\\\NBU 
    174556 Southampton",
    "Sharepoint": ""
    },

And the code looks as follows:

    var url = 'json/vm2.json';  // Here is the url path to my GeoJSON file, 


     function getColor(Type){   //layer 2 Virgin Media
     return Type == 'Infill' ? 'yellow' :
   Type == 'MDU' ? 'orange' :
                        'orange';
      }    
      function style(feature) {

      if (feature.properties.Type === "MDU" && 
      feature.properties.Post_Survey_Home_Count === "")
      return{
      fillColor: '#d4a270',
      fillOpacity: '#d4a270',
     weight: 0.5
      }
     if (feature.properties.Type === "Infill" && 
     feature.properties.Post_Survey_Home_Count === "")   
     return{

     fillColor: '#efefa9',
     fillOpacity: '#efefa9',
     weight: 0.5
     }
   else
   return {
      fillColor: getColor(feature.properties.Type),
      fillOpacity: 1,
     weight: 2,
opacity: 0.75,

//color: '#ffffff',
//dashArray: '3'
};

}

  var infill; 
  var mdu;    

    $.when(
$.getJSON(url),

).done (function(data) {

infill = L.geoJson(data, {

    pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,
        //color: "#000",

        color:getColor(feature.properties.Type),
        fillColor: getColor(feature.properties.Type),
        fillOpacity: 0.8

        }).bindTooltip(feature.properties.Owner);
    },
        onEachFeature: function (feature, layer) {
        },
        filter: function(feature, layer) {   
            return (feature.properties.Type == "Infill" );

        }
        })//.addTo(map);  //Note turned on to start map with Data, Checkbox has checked property.

   mdu = L.geoJson(data, {

    pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,

        //color: "#000",
        color:getColor(feature.properties.Type),
        fillColor: getColor(feature.properties.Type),
        fillOpacity: 0.8

        }).bindTooltip(feature.properties.Owner);
    },
        onEachFeature: function (feature, layer) {
        },
        filter: function(feature, layer) {   

            return (feature.properties.Type == "MDU" );
        }
        })//.addTo(map);
});

      // Handles the check boxes being turned on/off
     document.querySelector("input[name=infill]").addEventListener('change', 
    function() {
        if(this.checked) map.addLayer(infill)
          else map.removeLayer(infill)

            if (clickmark != undefined) {  //i.e. if it exists...
            //function all to remove the yellow select circle, could call function to clear table from here.
                map.removeLayer(clickmark);
            };
        })

  document.querySelector("input[name=mdu]").addEventListener('change', 
  function() {
        if(this.checked) map.addLayer(mdu)
          else map.removeLayer(mdu)

            if (clickmark != undefined) {
                map.removeLayer(clickmark);
            };
        })
      //2nd Layer in map


     // click marker
     var clickmark;


     // When you click on a circle, it calls the onMapClick function and passes the layers coordinates.
     // I grab the coords which are X,Y, and I need to flip them to latLng for a marker,  
     function onMapClick(coords) {
    //console.log(coords);
    var thecoords = coords.toString().split(',');
    var lat = thecoords[1];
    var lng = thecoords[0];
    //if prior marker exists, remove it.
    if (clickmark != undefined) {
      map.removeLayer(clickmark);

    };

     clickmark = L.circleMarker([lat,lng],{
        radius: 8,
        color: "yellow",
        fillColor:  "yellow",
        fillOpacity: 0.8}
     ).addTo(map);
}




      //If Radio Button one is clicked.  
document.getElementById("total").addEventListener('click', function(event) {
theExpression = L.geoJson(data);
console.log(theExpression); 
    });

$.getJSON(url, function(data) {
           mdu.addData(data);

    });

var myData =  L.layerGroup([]);
    myData.addLayer(mdu);
    myData.addTo(map); 

document.getElementById("completed").addEventListener('click', function(event) {
theExpression = 'feature.properties.Status == "Completed_and_invoiced"';    
console.log(theExpression);
    map.removeLayer(myData);

    myData.clearLayers();

    mdu = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'green',
                fillOpacity: 1,

                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Status);
        },
        filter: function(feature, layer) {   
             return (feature.properties.Status == "Completed_and_invoiced" );
        },


    });

$.getJSON(url, function(data) {
           mdu.addData(data);
    });

    myData.addLayer(mdu);
    myData.addTo(map);
});

All my layers are gone as per in the image below:

My console says:

Util.js:59 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined at stamp (Util.js:59) at NewClass.getLayerId (LayerGroup.js:149) at NewClass.addLayer (LayerGroup.js:42) at (index):318

The example comes from here:

http://www.gistechsolutions.com/leaflet/DEMO/filter/filter.html

Shall I try sth like this? GeoJSON filtering based on properties not working

or this?

http://bl.ocks.org/zross/47760925fcb1643b4225 however this example looks quite different.