Inherit from CSS ID - css

Question

Copied an Arduino example from https://github.com/m1cr0lab-esp32/remote-control-with-websocket. This is using a single LED for websockets, but I need multiple. The backend stuff works fine.
#led {
position: relative;
width: 3em;
height: 3em;
border: 2px solid #000;
border-radius: 2.5em;
background-image: radial-gradient(farthest-corner at 50% 20%, #b30000 0%, #330000 100%);
box-shadow: 0 0.5em 1em rgba(102, 0, 0, 0.3);
}
#led.on {
background-image: radial-gradient(farthest-corner at 50% 75%, red 0%, #990000 100%);
box-shadow: 0 1em 1.5em rgba(255, 0, 0, 0.5);
}
#led:after {
content: '';
position: absolute;
top: .3em;
left: 1em;
width: 60%;
height: 40%;
border-radius: 60%;
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}
<div class="panel">
<div id="led" class="%button1%"></div>
<button id="toggle1">Snowman</button>
</div>
I have a total of 5 LED's. Currently I simply copied the CSS stuff 5 times, but there has to be a better way.
Can anyone shine some light on this?

Answer 1

Change your id led to a class and duplicate to match the number of lights you need (i did 5 for the example).
In addition, to be able to target every led by itself via JS or CSS i would add a unique id to every led.
By adding the class on to an element you can turn the light on (see the light for the grinch in the example).
.led {
position: relative;
width: 3em;
height: 3em;
border: 2px solid #000;
border-radius: 2.5em;
background-image: radial-gradient(farthest-corner at 50% 20%, #b30000 0%, #330000 100%);
box-shadow: 0 0.5em 1em rgba(102, 0, 0, 0.3);
}
.led.on {
background-image: radial-gradient(farthest-corner at 50% 75%, red 0%, #990000 100%);
box-shadow: 0 1em 1.5em rgba(255, 0, 0, 0.5);
}
.led:after {
content: '';
position: absolute;
top: .3em;
left: 1em;
width: 60%;
height: 40%;
border-radius: 60%;
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}
<div class="panel">
<div id="led1" class="led" class="%button1%"></div>
<button id="toggle1">Snowman</button>
</div>
<div class="panel">
<div id="led2" class="led" class="%button1%"></div>
<button id="toggle2">Pumpkin</button>
</div>
<div class="panel">
<div id="led3" class="led on" class="%button1%"></div>
<button id="toggle3">Grinch</button>
</div>
<div class="panel">
<div id="led4" class="led" class="%button1%"></div>
<button id="toggle4">Santa on the Roof</button>
</div>
<div class="panel">
<div id="led5" class="led" class="%button1%"></div>
<button id="toggle5">Reindeers</button>
</div>