HTML checkbox is not clickable in some cases

I was creating a spoiler which uses a checkbox as input.

The problem with this is that only the first row is perfectly clickable.

Other Checkboxes are only clickable in some places.

Picture

An other weird this is when the first spoiler is checked. Picture All places are fully clickable again.

HTML/PHP

<div class="maasduin-container">
  <input type="checkbox"  id="spoiler" /> 
  <label for="spoiler" >Appartementen</label>
  <div class="spoiler">
    <?php
                foreach($hotels as $key => $hotel)
                {
                    ?>
                    <?php if ($hotel['MaasduinCategory'] == 'Appartementen'): ?>
                            <div class="products">
                                <div class="maasduin-foto"><img style="width: 136px; height: 134px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinImage']; ?>">
                                    <?php if ($hotel['MaasduinPas'] == '1'): ?>
                                        <div class="maasduin-actiefoto">
                                            <img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinPasfoto']; ?>">
                                        </div>
                                    <?php endif ?>
                                </div>
                                <div class="maasduin-naam"><?php echo $hotel['MaasduinNaam']; ?></h3></div>
                                <div class="maasduin-locatie"><?php echo $hotel['MaasduinLocatie']; ?></div>
                                <div class="maasduin-email"><?php echo $hotel['MaasduinEmail']; ?></div>
                                <div class="maasduin-telefoon"><?php echo $hotel['MaasduinTelefoon']; ?></div>
                                <div class="maasduin-website"><?php echo $hotel['MaasduinWebsite']; ?></div>                    
                        </div>
                    <?php endif ?>

                    <?php
                }
                    ?>      
                    <input type="checkbox"  id="spoiler" /> 
                    </div>



  <input type="checkbox"  id="spoiler2" /> 
  <label for="spoiler2" >Bed and Breakfast</label>
  <div class="spoiler">
    <?php
                foreach($hotels as $key => $hotel)
                {
                    ?>
                    <?php if ($hotel['MaasduinCategory'] == 'Bed and Breakfast'): ?>
                            <div class="products">
                                <div class="maasduin-foto"><img style="width: 136px; height: 134px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinImage']; ?>">
                                    <?php if ($hotel['MaasduinPas'] == '1'): ?>
                                        <div class="maasduin-actiefoto">
                                            <img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinPasfoto']; ?>">
                                        </div>
                                    <?php endif ?>
                                </div>
                                <div class="maasduin-naam"><?php echo $hotel['MaasduinNaam']; ?></h3></div>
                                <div class="maasduin-locatie"><?php echo $hotel['MaasduinLocatie']; ?></div>
                                <div class="maasduin-email"><?php echo $hotel['MaasduinEmail']; ?></div>
                                <div class="maasduin-telefoon"><?php echo $hotel['MaasduinTelefoon']; ?></div>
                                <div class="maasduin-website"><?php echo $hotel['MaasduinWebsite']; ?></div>                    
                        </div>
                    <?php endif ?>

                    <?php
                }
                    ?>      
                    <input type="checkbox"  id="spoiler2" />
                </div> 

CSS

 input[id^="spoiler"]{
 display: none;
}
input[id^="spoiler"] + label {
  display: block;
  width: 1000px;
  margin: 0 auto;
  padding: 5px 20px;
  background: #22CF00;
  color: #fff;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  transition: all .3s;
}
input[id^="spoiler"]:checked + label {
  color: black;
  background: #0EC100;
}
input[id^="spoiler"] ~ .spoiler {
  height: 0;
  overflow: hidden;
  opacity: 0;
  background: #ffffff;
  border: 1px solid #ccc;
}
input[id^="spoiler"]:checked + label + .spoiler{
  height: auto;
  opacity: 1;

What can be the problem?