Need to Add/Remove .png Legend with Leaflet Layers Control?

Question

Supporting Links

Website Location:
http://bit.ly/2fXCiTH
.JS File Location:
http://bit.ly/2g56W0U

Trying to accomplish

I would like to have a specific .png legend associated to each individual layer.

Problems so far

I have not been able to get code to recognize the layers being fired

My non-working code so far

---

var temperaturesLegend = L.control({
    position: 'bottomright'
});
var xwLegend = L.control({
    position: 'bottomright'
});

temperaturesLegend.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML +=
        '';
    return div;
};

//temperaturesLegend.addTo(map);

xwLegend.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML +=
        '';
    return div;
};

// count plus 1
others = 1;

// Add and remove layers
map.on('overlayadd', function(eventLayer) {
    // Switch to the temperaturesLegend...
    if (eventLayer.name === 'temperatures') {
        // xwlegend.removeFrom(map);
        temperaturesLegend.addTo(map);
    } else { // Or switch to the xwlegend...
        if (others < 1) {
            xwLegend.addTo(map);
        }
        others++; // temperaturesLegend removeFrom(map);
        //xwlegend.addTo(map);
    }
});

// Add and remove layers
map.on('overlayremove', function(eventLayer) {
    temperatures = eventLayer;
    //console.log(eventLayer.name);
    // Switch to the xwlegend...
    if (eventLayer.name === 'temperatures') {
        this.removeControl(temperaturesLegend);

    } else { // Or switch to the xwlegend...
        others--;
        if (others < 1) {
            this.removeControl(xwLegend);
        }

    }
});