JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Klicks: <span>0</span></h1>
<p><a id="0" class="on" href="#">LAMPE 1</a></p>
<p><a id="1" class="on" href="#">LAMPE 2</a><a id="2" class="on" href="#">LAMPE 3</a></p>
<p><a id="3" class="on" href="#">LAMPE 4</a><a id="4" href="#">LAMPE 5</a><a id="5" class="on" href="#">LAMPE 6</a></p>
<p><a id="6" class="on" href="#">LAMPE 7</a><a id="7" class="on" href="#">LAMPE 8</a><a id="8" class="on" href="#">LAMPE 9</a><a id="9" class="on" href="#">LAMPE 10</a></p>
<ul></ul>
CSS
p{text-align:center !important;} a{color:#000000;padding:0 20px;font-weight:bold;} a.on{color:#FF0000} ul{margin-top:40px;}
JavaScript
$(document).ready(function() {
var lamps = [[0,1,2],[1,0,2,3,4],[2,0,1,4,5],[3,1,4,6,7],[4,1,2,3,5,7,8],[5,2,4,8,9],[6,3,7],[7,3,4,6,8],[8,4,5,7,9],[9,5,8]];
$('a').click(function() {
var lampid = $(this).attr('id');
for (var i = 0; i < lamps[lampid].length; i++) {
$('#'+lamps[lampid][i]).toggleClass('on');
}
var klicks = parseInt($('h1 span').html()) + 1;
$('h1 span').html(klicks);
$('ul').append('<li>Lampe '+(parseInt(lampid)+1)+'</li>')
return false;
});
});