JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click on an image</p>
<img src="http://dummyimage.com/50/f00/fff&text=a" onclick='toogle(this, ["http://dummyimage.com/50/ab0/fff&text=b"]);' />
<img class="with-action" id="image2" name="image2" src="http://dummyimage.com/50/0f0/fff&text=a" onclick='toogle(this, ["http://dummyimage.com/50/0fa/fff&text=b", "http://dummyimage.com/50/0bb/fff&text=c"]);'/>
<img class="with-action" id="image3" name="image3" src="http://dummyimage.com/50/00f/fff&text=a" onclick='toogle(this);'/>

CSS

.with-action:hover {
    cursor: pointer;
}

JavaScript

var gStorage = {};

function toogle(anImage, anAltSrcArr) {
    if (typeof(anImage) === "undefined" || typeof(anAltSrcArr) === "undefined" || anAltSrcArr.length === 0) {
        return;
    }

    var id = anImage.id;
    var oldSrc = anImage.src;

    if (typeof(gStorage[id]) === "undefined") {
        gStorage[id] = {
            'id': id,
            'origSrc': oldSrc,
            'i': 0
        };
    }

    gStorage[id].i += 1;
    if (gStorage[id].i > anAltSrcArr.length) {
        gStorage[id].i = 0;
    }

    if (gStorage[id].i === 0) {
        anImage.src = gStorage[id].origSrc;
    } else {
        anImage.src = anAltSrcArr[gStorage[id].i - 1];
    }
}