How to add legend in leaflet Map

Question

I have a leaflet map and I would like to add a legend. In the map I have many filter which can return many lines colors. For example one can filter by lanes and got four colors.

I tried this (solution found on leaflet documentation) but I didn't work.

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

legend.onAdd = function (map_94a3167215404c0dad9233926d918875) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [110, 80, 50, 10],
        labels = [];

    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_94a3167215404c0dad9233926d918875);



<div class="row h-100">

    <div class="col-md-2" id="destinationDiv">
        <hr>
        <div class="">
          <h3>Network attributes</h3>
        </div>
        <hr>

            <div class="form-group w-75 mx-auto">
                <label for="linkSelector" class="sr-only">Links</label>
                <select id="linkSelector" class="form-control" onchange="linkDropDown();">
                    <option value="default">Links...</option>
                    <option value="lanes">Lanes (input)</option>
                    <option value="length">Length (input)</option>
                </select>
            </div>
            <div class="legend"></div>

            
    </div>

    <div class="col-md-10">
      <div class="folium-map" id="map_94a3167215404c0dad9233926d918875" ></div>
    </div>

</div>