for文のチェックボックスをカスタムすると、一つ目のボックスのみチェックされる

Question

前提・実現したいこと

現在、for文で複数の項目を表示しており、チェックボックスの見た目をcssで変更しています。
見た目は変更されたのですが、クリックすると項目に対応したチェックボックスにレ点が付かず、
最初の項目横のチェックボックスにレ点が付く状況です。
どのように修正すればよいでしょうか。

該当のソースコード

input.php

<dd>
 <ul class="list-enquete">
   <?php for ($i = 0; $i < count($arr_enquete); $i++) {
    $flg = false;
    if (array_key_exists('enquete', $_POST)) {
    if (in_array($i, $_POST['enquete']))  $flg = true;
    }
   ?>
   <li><input type="checkbox" name="enquete[]" id= "advice" value="<?php echo $i; ?>"<?php if ($flg) echo ' checked="checked"'; ?>> 
       <label for="advice"> <?php echo esc_h($arr_enquete[$i]); ?></label></li>
   <?php } ?>
 </ul>
</dd>

/* 元々のチェックボックス（非表示） */
#main .sec-form .list-enquete input#advice[type="checkbox"]{
    display: none;
}
/* ラベル */
#main .sec-form .list-enquete input#advice[type="checkbox"]+label{
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 30px;
    padding-right: 10px;
}
/* ラベルの左に表示させるボックス□ */
#main .sec-form .list-enquete input#advice[type="checkbox"]+label::before{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    left: 0;
    top: 50%;
    border: 1px solid;
    border-color:  #b6b6b4; 
    background-color: #ebe7e1; 
}
/* レ点 */
#main .sec-form .list-enquete input#advice[type="checkbox"]:checked+label::after{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 9px;
    margin-top: -9px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color:  #424242;
}

補足情報（FW/ツールのバージョンなど）

wordpress 5.4.4

Answer 1

inputのidが全部同じだからです

基本htmlでは同じidを持つ要素がページ内に複数あってはいけません

id="advice"
for="advice"
↓
id="advice_<?=$i?>"
for="advice_<?=$i?>"

とでもしておきましょう

Comments

[scottie320]

複数の場合はそのようにidを付けるのですね。勉強になりました。
scssでfor文を使用することで、問題なく動くことを確認しました。ありがとうございました。