CSS custom checkboxes

I have a page with 30 Checkboxes on it. Those are for seat reservation. Now i tried to style them.

HTML

<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>

---

CSS

      .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;
    }

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!