Checkbox list selects only the first option not allowing selecting the others

Question

I’m developing a form where it has a list of options using the input type checkbox. It happens that in the checkbox list only it is possible to select only the first option and it is not possible to select the other options. I created an example page to demonstrate my doubt: https://2020x.000webhostapp.com/post05/

In case I have a table in Mysql called opcoes_tbl where it has a column called characteristic as structure below:

options

id | caracteristica
---------------------
01 | Aceita financiamento
02 | Aceita permuta
03 | Adega
xx | ...

In case I can get all the data from the column "characteristic" and explain them on a page under the format input type checkbox using the PHP and HTML code below:

<div class="container">


  <div class="row">
    <div class="col-8">

        <?php

include 'dbConfig.php';
$stmt = $connection->prepare('SELECT * FROM opcoes_tbl ORDER BY caracteristica ASC');
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<?php foreach($results as $row):?>

      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="opcoes" name="caracteristica" value="<?= $row['caracteristica']; ?>">
        <label class="custom-control-label" for="customCheck1"><?= $row['caracteristica']; ?></label>
      </div>

<?php endforeach ?>

    </div>
  </div>


</div>

However, it is only possible to select the first option and it is not possible to select the other options as mentioned above and shown on this page: https://2020x.000webhostapp.com/post05/. In this case, how do I edit the php code so that it shows all the options in the column as well as give the user the possibility to select more than one option? Thank you.

Answer 1

The problem is that all labels are referencing the same id.
Try it like this:

  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="<?= $row['id']; ?>" name="caracteristica" value="<?= $row['caracteristica']; ?>">
    <label class="custom-control-label" for="<?= $row['id']; ?>"><?= $row['caracteristica']; ?></label>
  </div>