I created an object in JS called filterObj like this

var filterObj={};

The problem is that if I add property to the object, it adds but it removes the previous ones. In fact it takes the root filterObj which is empty, not the edited one.

In which I have two functions:

function handleGovernorate(Governorate) {
    if (Governorate === "") {
        return
    }
    else if (Governorate === "all") {
        delete filterObj.governorate;
        handleFilterObj();
        return setFinalLocations(Locations);
    }
    else {
        filterObj.governorate = Governorate;
        handleFilterObj();
    }
}

function handleGovernorate(District) {
    if (District === "") {
        return
    }
    else if (District === "all") {
        delete filterObj.district;
        handleFilterObj();
        return setFinalLocations(Locations);
    }
    else {
        filterObj.district = District;
        handleFilterObj();
    }
}

If I call handleGovernorate("mountLB") it sets the property governorate with value mountLB, but if I then call handleDistrict("2") the function will set a property district with value 2 but with removing the governorate property - why?