Adapting the leaflet.js Choropleth example with non static legend

Question

I am trying to use the beautiful base example Choropleth, but would like to have a second base map, with a second legend that would be linked to the base map used (therefore not anymore static), with just the grades variable changing.

The initial code of this part is:

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

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [0, 10, 20, 50, 100, 200, 500, 1000],
        labels = [];

    // loop through our density intervals and generate a label with a colored square for each interval
    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
            '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
    }

    return div;
};

legend.addTo(map);

How would you advise me to start coding?

Thank you.