JSFiddle - React, Tailwind, and code Playground

HTML

<img id="traffic" src="" data-counter="" />
<button id="pingo">Ping</button>

JavaScript

var lights = [
        'http://www.drivingtesttips.biz/images/traffic-light-red.jpg',
        'http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg',
        'http://www.drivingtesttips.biz/images/traffic-lights-green.jpg',
        'http://www.drivingtesttips.biz/images/traffic-lights-amber.jpg'
    ];
    
	  var pingo = document.getElementById('pingo');
    pingo.addEventListener("click", changeLights);
    
    function changeLights() {

        var el = document.getElementById("traffic")
        if(el.dataset.counter == ''){
            var newItem = 0;
        } else {
            var currentIndex = parseInt(el.dataset.counter);
            var lastIndex = lights.length - 1;
            var newItem = (currentIndex == lastIndex) ? 0 : currentIndex + 1;
        }
        el.dataset.counter = newItem;
        el.src = lights[newItem];
    }

    changeLights();