PHPとJavaScriptによるいいね機能

Question

前提

JavaScriptのfetchでいいね機能を作成している。

実現したいこと

phpのforeachで出力された分を要素ごとに「いいね」できる様にしたい

問題(困っている内容)

いいねボタンを押すとforeachで出力された物の全てにいいねがついてしまう

該当のソースコード

//index.php
//省略
echo '<form id="like_form">';
    echo '<input id="store_id" type="hidden" name="store_id" value="'.$_SESSION['store_id'].'">';
    echo '<input id="user_id" type="hidden" name="user_id" value="'.$_SESSION['user']['user_id'].'">';
    $sql=$pdo->prepare('
    select *
        from indeed
        join favorite
        where favorite.user_id = "'.$_SESSION['user']['user_id'].'" and indeed.store_id = favorite.store_id
    ');
    $sql->execute();
        if($sql->rowCount() > 0) {
            echo '<div class="favorite_button_position">';
            echo '<button type="button" name="like_button" value="1"><span id="favorite_text">お気に入り済み</span><img src="img/heart_on.png" alt="heart" id="img_heart"></button>';
            echo '</div>';
        } else {
            echo '<div class="favorite_button_position">';
            echo '<button type="button" name="like_button" value="0"><span id="favorite_text">お気に入りに登録</span><img src="img/heart_off.png" alt="heart" id="img_heart"></button>';
            echo '</div>';
        }
    echo '</form>';
//省略

//fetch.js
const btn = document.getElementById('like_button');
let btn_value = document.getElementById('like_button').value;
const img = document.getElementById('img_heart');
const form = document.getElementById('like_form');

btn.addEventListener('click', ()=> {
    if(btn_value == "0") {
        //切り替え
        console.log('赤にします');
        img.src = "img/heart_on.png";
        btn_value = "1";
    } else if(btn_value == "1") {
        //切り替え
        console.log('黒にします');
        img.src = "img/heart_off.png";
        btn_value = "0";
    }

    const formData = new FormData(form);
    fetch('like.php', {
        method: 'POST',
        body: formData,
    })
    .then(response =>  response.text())
    .then(data => {
        console.log(data);
        console.log('done');
    });
});

//like.php
require('../DB_connect/db_connect.php');

if(isset($_POST['store_id'])) {
    $sql=$pdo->prepare('select * from favorite where store_id = "'.$_POST['store_id'].'" and user_id = "'.$_POST['user_id'].'"');
    $sql->execute();
    if($sql->rowCount() > 0) {
        $db=$pdo->prepare('delete from favorite where store_id = "'.$_POST['store_id'].'" and user_id = "'.$_POST['user_id'].'"');
        $db->execute();
    } else {
        $db=$pdo->prepare('insert into favorite(store_id, user_id) values("'.$_POST['store_id'].'", "'.$_POST['user_id'].'")');
        $db->execute();
    }
}

試したこと

jsで連番idを割り振り取得しようとしたが上手くいかなかった

原因

jsで取得したidが同じなので全件に影響してしまっている

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

Mac
VsCode
MySQL

補足2

上手く言葉にできなくてもどかしい部分が多々ありますが、何卒知恵を貸していただきたいです。

Comments

[m.ts10806]

変に省略すると全体像が見えないので、全体像が見える程度に、可能なら他者が再現可能な範囲のミニマムコードを提示してください

[Sushi]

全文を記入した場合、関係のない部分がとても多くなるので重要な部分以外は省略しました。また、先ほど質問の内容は自己解決できました。以後質問を行う際は再現可能な範囲を見極めた上でコードを提示させていただきますので機会があれば知恵をお貸ししていだだきたいです。

Answer 1

JavaScriptで要素にforでループさせ連番を付与→forでループさせ連番のidをGetElementByIdで1つずつ取得→取得した要素分fetch関数をforでループで作成した。

Answer 2

foreachで出力された物

PHPでforeachで出力されている箇所が見当たりません
type=hiddenで渡しているのも意味がないのでやめましょう
特定のレコードに対して処理をしたいならそのレコードを指定するユニークなidが必要です
それがstore_idであればstore_idに紐づいたすべてのデータが対象になるのは仕方ないでしょう。

なおSQL処理のprepareの使い方もおかしいですし
like.phpのuser_idの受け渡しをpostするのもおかしいです。

Comments

[Sushi]

すみません。foreach処理を含め全文を記入した場合行数がとても多くなるので省略しました。また、先ほど質問の内容は自己解決できました。アドバイスしていただきありがとうございます。