mobile hover problem

[MrTilllus]

hey,
i want to create a map with clickable areas and if i click one area its get dyed red and on desktop the hover is darkred. so far so good when i click the next area the first area should get back to his standart(blue and hover dark blue).
on desktop is everything ok but on mobile there i have a little problem
after first click the area gets darkred and after the second click the firtst area gets red (not blue again) and the second area gets dark red.
the problem is fixed if i click after the first click anywhere else and then click the second area but this is not the way to go

`
var newData = {
'areas': {},
'plots': {}
};

if (mapElem.attrs.fill == blue || mapElem.attrs.fill == blue_dark) {
// go through all areas and dye them blue
for (area in point_area) {
newData.areas[area] = {
attrs: {
fill: blue
},
attrsHover: {
fill: blue_dark,
},
};
newData.plots[point_area[area]] = {
attrs: {
fill: red
},
attrsHover: {
stroke: "#FFF"
},
};
}
//dye the clicked area red
newData.areas[id] = {
attrs: {
fill: red
},
attrsHover: {
fill: red_dark
},
};
newData.plots[point_area[id]] = {
attrs: {
fill: "#FFF"
},
attrsHover: {
stroke: red
},
};
}
// if the area is not blue
else {
for (area in point_area) {
newData.areas[area] = {
attrs: {
fill: blue
},
attrsHover: {
fill: blue_dark,
},
};
newData.plots[point_area[area]] = {
attrs: {
fill: red
},
attrsHover: {
stroke: "#FFF"
},
};
}
}
$(".mapcontainer").trigger('update', [{ mapOptions: newData }]);
`