CSS custom checkboxes - html

Question

I have a page with 30 Checkboxes on it. Those are for seat reservation.
Now i tried to style them.
.seatlayout{
border: 1px solid;
display: table;
width: 30%;
padding: 6% 2% 0% 2%;
border-radius: 5%;
}
.seat{
position: relative;
width: 22%;
margin-bottom: 10%;
float: left;
text-align: center;
border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
position: relative;
width: 100%;
height: 100%;
}
[class^="seatcon"] label,
.seatdis label{
background-color: #f1f2ed;
cursor: pointer;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
z-index:10
}
[class^="seatcon"] input[type="checkbox"]:checked + label
{
background-color: #66bb6a;
}
.seatdis input[type="checkbox"]:checked + label{
background-color: grey;
pointer-events: none
}
[class^="seatcon"] input[type="checkbox"]:checked +
label:after {
opacity: 1;
}
<div class="seatlayout">
<div class="seat">
<div class="seatcont1">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab1">
</div>
</div>
<div class="seat">
<div class="seatcont2">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab2">
</div>
</div>
<div class="seat">
<div class="seatcont3">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab3">
</div>
</div>
</div>
Problem
No matter on which seat i click on, it always checkes the first one. I tried several approaches adding unique classes and id's while working with wildcards. Any help would be highly apprieciated!

Answer 1

You've put the same id on all of your checkboxes. You need to give them all a different id.
Additionally, you are missing an ending quote on all of your checkboxes after the type.
<input type="checkbox" id="checkbox">
<label for="checkbox" id="lab1">
....
<input type="checkbox" id="checkbox2">
<label for="checkbox2" id="lab1">

Answer 2

There are multiple things wrong.
The label element is never closed. The label element doesn't need an id it's the for attribute that needs to match the id of the input. Second the input of the checkboxes is never closed by an ". Third the id always needs to be unique, it's a unique identifier. So every input needs to have their own unique id.
.seatlayout{
border: 1px solid;
display: table;
width: 30%;
padding: 6% 2% 0% 2%;
border-radius: 5%;
}
.seat{
position: relative;
width: 22%;
margin-bottom: 10%;
float: left;
text-align: center;
border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
position: relative;
width: 100%;
height: 100%;
}
[class^="seatcon"] label,
.seatdis label{
background-color: #f1f2ed;
cursor: pointer;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
z-index:10
}
[class^="seatcon"] input[type="checkbox"]:checked + label
{
background-color: #66bb6a;
}
.seatdis input[type="checkbox"]:checked + label{
background-color: grey;
pointer-events: none
}
[class^="seatcon"] input[type="checkbox"]:checked +
label:after {
opacity: 1;
}
<div class="seatlayout">
<div class="seat">
<div class="seatcont1">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"> 1</label>
</div>
</div>
<div class="seat">
<div class="seatcont2">
<input type="checkbox" id="checkbox2">
<label for="checkbox2"> 2</label>
</div>
</div>
<div class="seat">
<div class="seatcont3">
<input type="checkbox" id="checkbox3">
<label for="checkbox3"> 3</label>
</div>
</div>
</div>

Answer 3

You have the same id for every checkbox. You should use a unique id for each one.