Changing point icon (geoJSON) on click and changing back when clicking another point using Leaflet?

Question

I have a geoJSON (10 points) that is drawn using an icon. I want to change the icon when I click on one of the points and then I want to change it back when clicking another point. I don't know how to change it back.

Can anyone help me?

I have this piece of code:

var icon1 = L.icon({
    iconUrl: 'img1.png',
    iconSize: [20,20]
});

var icon2 = L.icon({
    iconUrl: 'img2.png',
    iconSize: [20,20]
});

function clickFeature(e) {
   var layer = e.target;
   layer.setIcon(layer.options.icon = icon2);
}

function onEachFeature (feature, layer){
    layer.on({
        click: clickFeature,
    })
};

var pointsJSON = L.geoJson(points,{    
        pointToLayer: function (feature, latlng) {    
        return L.marker(latlng, {icon: icon1});
    },    
    onEachFeature: onEachFeature
    }   
).addTo(map);

Answer 1

Not tested, but something like this should work

var oldLayer = ""; // to start, declare an empty variable outside of the function scope
function clickFeature(e) {
   var layer = e.target;
   layer.setIcon(layer.options.icon = icon2);

   // only attempt to change oldLayer icon back to original if oldLayer defined
   if (oldLayer) oldLayer.setIcon(layer.options.icon = icon1);
   // keep a reference to switch the icon back on the next click
   oldLayer = layer;
}