while文で複数表示したボタンについて。最初にクリックしたものは一回で反応するが、違うボタンを押した時は２回押さないと反応しない

Question

掲示板ポートフォリオをつくっているものです。like機能を実装したくSQLから取得した投稿とユーザをwhile文でその分取得して同時にLikeボタンも表示させてクリックしたらボタンの色の切り替えと、Likeの情報を非同期でPOSTしてます。
うまくいかない動作として、タイトルの通り1回目ボタンをクリックした時は問題なく色が変わりPOSTさせることができますが、while文で複数作った他のボタンをクリックすると2回そのボタンをクリックしないと反応しないです。一回でボタンが反応するようにしたいです。
ご助力の方どうかよろしくお願いします。

コード
 $outLikes = $db->prepare('SELECT * FROM favorites WHERE account=? AND favorite="favorite"');
    $outLikes->execute(array($member['user']));
    $outLike = $outLikes->fetchAll();
    if (isset($_POST['favorite'])) {
       $postLikes = $db->prepare('INSERT INTO favorites (favorite_id ,account, favorite) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE favorite = ?');
       $postLikes->bindParam(1, $_POST['favorite_id'], PDO::PARAM_INT);
       $postLikes->bindParam(2, $_POST['user'], PDO::PARAM_STR);
       $postLikes->bindParam(3, $_POST['favorite'], PDO::PARAM_STR);
       $postLikes->bindParam(4, $_POST['favorite'], PDO::PARAM_STR);
       $postLikes->execute();
    }

 $user = $db->query('SELECT me.user, p.* FROM members me, posts p WHERE me.id=p.member_id ORDER BY p.created DESC');
    $posts = $user;

コード
 <?php if ($post['user'] !== $member['user']) :?>
                        <?php for ($i = 0; $i < count($outLike); $i++) :?>
                        <?php if ($outLike[$i]['favorite_id'] === $post['id'] && $outLike[$i]['favorite'] === 'favorite') :?>
                            <?php $icon = 'fas fa-thumbs-up'?>
                            <?php $boolean = 'hoge'?>
                            <?php break?>
                        <?php endif ;?>
                        <?php endfor; ?>
<?php while ($post = $posts->fetch()) : ?>
  <form id="like_form" action="" method="post">
                            <span class="hidden_id" style="display: none;"><?php echo htmlspecialchars($post['id'], ENT_QUOTES)?></span>
                            <input type="hidden" name="user" value="<?php echo htmlspecialchars($member['user'], ENT_QUOTES) ?>">
                            <?php if (isset($boolean)) :?>
                                <span class="hidden_boolean" style="display: none;">true</span>
                            <?php else :?>
                                <span class="hidden_boolean" style="display: none;">false</span>
                            <?php endif ;?>
                        </form>
                        <?php if (isset($icon)) :?>    
                            <button class="like__btn">
                            <span class="icon"><i class="<?php echo $icon?>"></i></span>
                            Like
                        </button>
                        <?php else :?>
                        <button class="like__btn">
                            <span class="icon"><i class="far fa-thumbs-up"></i></span>
                            Like
                        </button>
                        <?php endif ;?>
                    <?php endif; ?>
                    <?php unset($icon); unset($boolean)?>     

コード
 const likeBtn = document.querySelectorAll('.like__btn');
        const hidden_id = document.querySelectorAll('.hidden_id');
        const hidden_boolean = document.querySelectorAll('.hidden_boolean');
        let likeIcon = document.querySelectorAll('.icon');
        let clicked = null; 
   
for (let i = 0; i < likeBtn.length; i++) {
            likeBtn[i].addEventListener('click', () => {
                const postForm = new FormData(document.forms.like_form);
                    //カラムfavoriteだった場合true
                    if (hidden_boolean[i].textContent === 'true') {
                        clicked = true;
                    }
                    //likeおされてない場合
                if (clicked === false) {
                    clicked = true;
                    likeIcon[i].innerHTML = `<i class="fas fa-thumbs-up"></i>`;
                    postForm.set('favorite_id', hidden_id[i].textContent);
                    postForm.set('favorite', 'favorite');
                    const form = {
                        method: 'post',
                        body: postForm
                    };

                    fetch('index.php', form)
                        .then((res) => {
                            if (res.status !== 200) {
                                throw new Error("system error.");
                            }
                            return res.text();
                        }).then((text) => {
                            // console.log(text);
                        }).catch((e) => {
                            console.log(e.message);
                        }).finally(() => {
                            console.log('done!')

                        });
                } else {
                    clicked = false;
                    likeIcon[i].innerHTML = `<i class="far fa-thumbs-up"></i>`;
                    hidden_boolean[i].innerHTML = 'false';
                    postForm.set('favorite_id', hidden_id[i].textContent);
                    postForm.set('favorite', 'notFavorite');
                    const form = {
                        method: 'post',
                        body: postForm
                    };

                    fetch('index.php', form)
                        .then((res) => {
                            if (res.status !== 200) {
                                throw new Error("system error.");
                            }
                            return res.text();
                        }).then((text) => {
                            // console.log(text);
                        }).catch((e) => {
                            console.log(e.message);
                        }).finally(() => {
                            console.log('done!')
                        });
                }
            });
        }

Comments

[S.Percentage]

clickイベントの中でconsole.log(i)を入れてiの値がどうなってるかって見れますか？
JavaScriptの変数キャプチャって結構謎だった記憶があって、もしかしたらどのボタン押してもiの値が同じということがあるかもしれないです。

自分の思い違いで全部違う値だったとかだったら無視してください……

[fuyukixxx]

返信ありがとうございます。
変数iの値は0、1、2... ループごとに+1になってます。。
クリックが一回で反映されないイメージで例えると、現在開いているブラウザ以外の所を操作してて、またブラウザに戻るとき一回クリックしないとそのブラウザを操作できない感じ？です。

Answer 1

うーんなるほど、だとすると自分のは思い違いですね……失礼しました。

コード見てて気になったのは、clicked === falseのときにhidden_boolean[i].innerHTML='true';がないことですね。
これを入れないとclickedの値が変わらないのでは、と思うのですが、どうでしょうか？

Comments

[fuyukixxx]

すみません。HTMLPHPのコードが抜けていました。条件分岐でデータベース側のfavoriteカラムがfavorite'だった場合$boolean変数に文字列代入。
<?php if ($outLike[$i]['favorite_id'] === $post['id'] && $outLike[$i]['favorite'] === 'favorite') :?>
<?php $boolean = 'hoge'?>
<?php endif ;?>

$booleanに値があればtrue文字列を生成それをJS側のDOMで受け取り
<?php if (isset($boolean)) :?>
<span class="hidden_boolean" style="display: none;">true</span>
<?php else :?>
<span class="hidden_boolean" style="display: none;">false</span>
<?php endif ;?>
さらにJS側で分岐してます。
const hidden_boolean = document.querySelectorAll('.hidden_boolean');
//カラムfavoriteだった場合true
if (hidden_boolean[i].textContent === 'true') {
clicked = true;
}
clickedの値は変わってます。コード抜けててすみません。