How can I change leaflet marker and change back to it's position if it clicks on other marker?

Question

I've 3 markers in my map, now I want to click on any marker. When I click on the marker it should be black and when I click on another marker then It should be change as it was earlier. Currently marker is changing to black on click.

Here's my my html code

<div id="mapid" style="width: 600px; height: 400px;"></div>

Here's my my js script

var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    var blue = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });
    var red = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });
    var yellow = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    var selectedIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });
    let bluemarker = L.marker([51.5, -0.09], {icon: blue }).on('click', function(e){
        bluemarker.setIcon(selectedIcon)
    }).addTo(mymap);

    let redmarker = L.marker([51.502866, -0.082397],{icon: red }).on('click', function(e){
        redmarker.setIcon(selectedIcon)
    }).addTo(mymap)
    let yellowmarker =L.marker([51.506552, -0.092697], {icon: yellow }).on('click', function(e){
        yellowmarker.setIcon(selectedIcon)
    }).addTo(mymap)

Answer 1

Add all markers to a featureGroup, so you have an easy access to it. Then add the origin icon to the options, so you can always go back to this icon. Now you can reset the icons on click before you append the new icon:

var fg = L.featureGroup().addTo(mymap);
let bluemarker = L.marker([51.5, -0.09], {originIcon: blue }).on('click', function(e){
        resetIcons();
        bluemarker.setIcon(selectedIcon)
    }).addTo(fg);

let redmarker = L.marker([51.502866, -0.082397],{originIcon: red }).on('click', function(e){
        resetIcons();
        redmarker.setIcon(selectedIcon)
    }).addTo(fg)
let yellowmarker =L.marker([51.506552, -0.092697], {originIcon: yellow }).on('click', function(e){
        resetIcons();
        yellowmarker.setIcon(selectedIcon)
    }).addTo(fg)


function resetIcons(){
  fg.getLayers().forEach((layer)=>{
     layer.setIcon(layer.options.originIcon);
  });
}