JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Lampada"> <span id="Lampada1"> <img height="200" src="http://apoie.org/LedOff.png" alt="clique para ligar" title="clique"></span>
	<span id="Lampada2"> <img height="200" src="http://apoie.org/LedOff.png" alt="clique para ligar" title="clique"></span>
	<span id="Lampada3"> <img height="200" src="http://apoie.org/LedOff.png" alt="clique para ligar" title="clique"></span>
.............. <span id="LampadaN"> <img height="200" src="http://apoie.org/LedOff.png" alt="clique para ligar" title="clique"></span>

</div>

JavaScript

var Chave = [];
IconeLed = {
    true: ' <img src="http://apoie.org/LedOn.png" height="200"  alt="clique para desligar"   title="clique" >',
    false: ' <img src="http://apoie.org/LedOff.png" height="200"  alt="clique para ligar"      title="clique" >'
};

function MudaImagem(elemento) {
    Chave[elemento] = !Chave[elemento];
    document.getElementById(elemento).innerHTML = IconeLed[Chave[elemento]];
}

var elemento = document.querySelectorAll("#Lampada span");
for (var i = 0; i < elemento.length; i++) {
    elemento[i].addEventListener("click", function () {
        MudaImagem(this.id)
    });
}