php foreach内のクラスの取得方法(jQuery)

Question

下記のコードのように日報の各項目のあるテーブルを作成しているのですが、

そこでjQueryでlikeButtonというクラスをクリックしたらajaxで非同期で

いいねの数が表示されるという実装を行なっています。

foreachで各auto_id(各日報毎のid)を一覧で表示しており、likeButtonには$iで
インデックスをつけています。

しかしjQueryの方で取得したlikeButtonにインデックスを貼り付ける方法がわからず、苦戦しております。

また、この表は各auto_idに紐づいて表でauto_id(1)~auto_id(8)まで表示されているのですが、
どのlikeButtonをクリックしてもauto_id(1)にデータが入ってしまいます。

<table>
  <tr>
    <th>担当</th>
    <th>訪問日付<br>顧客名</th>
    <th>目的<br>結果</th>
    <th>内容</th>
  </tr>
  <?php if(!empty($salesdata) === true) {
    $i = 0;
    foreach ($salesdata as $value) { ?>
      <tr>
      <form action="../history/sales_report_commentSP.php" method="post">
        <td><?php echo $value['first_name']; ?></td>
        <td>
          <?php
            $salesDate = explode("-", $value['sales_date']);
            echo $salesDate[1] . '/' . $salesDate[2] . '<br><br>'; ?>
          <p class="shop_url">
            <a href="<?php echo ROOT_PATH; ?>customer/list/customer_dispSP.php?salesClient_id=<?php echo $value['salesClient_id'] ?>" class="shop_url"><?php echo $value['shop_name']; ?></a>
          </p>
        </td>
        <td>
          <?php echo $value['progress_purpose_name'] . '<br><span>↓<span><br>' . $value['progress_name']; ?>
        </td>
        <td>
          <p><?php echo $value['sales_history']; ?></p>
          <input type="submit" class="comment far" value="&#xf086;">
            <input type="hidden" name="auto_id" value="<?php echo $value['auto_id']; ?>">
            <input type="hidden" name="driver_id" value="<?php echo $value['driver_id']; ?>">
            <input type="hidden" name="first_name" value="<?php echo $value['first_name']; ?>">
            <input type="hidden" name="last_name" value="<?php echo $value['last_name']; ?>">
            <input type="hidden" name="sales_date" value="<?php echo $value['sales_date']; ?>">
            <input type="hidden" name="shop_name" value="<?php echo $value['shop_name']; ?>">
            <input type="hidden" name="progress_purpose_name" value="<?php echo $value['progress_purpose_name']; ?>">
            <input type="hidden" name="progress_name" value="<?php echo $value['progress_name']; ?>">
            <input type="hidden" name="sales_history" value="<?php echo $value['sales_history']; ?>">
      </form>
          <!-- いいねアイコン -->
          <div class="icon_cow" style="margin:0;">
            <input class="likeButton<?php echo $i ?>" type="image" src="<?php echo ROOT_PATH; ?>images/logo.jpg" onclick=""
              style="margin:0; 	width:24px; height:24px; margin:0; margin-left:3px; border:none;">
              <input type="hidden" name="auto_id" value="<?php echo $value['auto_id']; ?>">
              <?php foreach($driversId as $id) ?>
              <input type="hidden" name="voter_id" value="<?php echo $id; ?>">
              <input type="hidden" name="submitter_id" value="<?php echo $value['driver_id']; ?>">
            <i class="far fa-thumbs-up"></i>
            <?php
                  try {
                    $dbh = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME, DB_USER, DB_PASSWORD, $options);
                    $dbh->query('SET NAMES utf8');

                    // m_like_masterからauto_idに紐づいたlike_idの数をカウントし取得。 AS counted を引数にしています
                    $sql = "SELECT COUNT(like_id) AS counted FROM m_like_master
                    WHERE auto_id= " . $value['auto_id'];

                    $stmt = $dbh->prepare($sql);
                    $stmt->execute();
                    $countResult = $stmt->fetch(PDO::FETCH_ASSOC);
                    $current_like_count = $countResult['counted'];

                    $dbh = null;

                  } catch (PDOException $e)  {
                    exit('顧客データベース接続失敗。'.$e->getMessage());
                  } ?>
                  <!-- いいね数の表示 -->
                  <p class="like_result"><?php	echo $current_like_count; ?></p>
                  <input type="hidden" name="auto_id" value="<?php echo $value['auto_id']; ?>">
                  <input class="like_num" type="submit">
          </div>
        </td>
      </tr>
  <?php $i++; } ?>
</table>

jQueryは同一のhtml内、body一番下に記載しています。

		let likeButton = $(".likeButton<?php echo $i; ?>");

		likeButton.on('click', function(e){
			console.log(e)
			$.ajax({
				type: 'POST',
				url: "sales_report_like_done_ajaxPost.php",
				data: {
					auto_id    : $("input[name=auto_id]").val(),
					voter_id     : $("input[name=voter_id]").val(),
					submitter_id     : $("input[name=submitter_id]").val(),
				}
			});
		});

		likeButton.on('click', function(){
			$('.like_result').load('sales_reportSP.php .like_result');
		});

どなたかご教示いただけますと幸いです。

どうかよろしくお願いします。

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

・バージョン
PHP 7.1.23
mysql 5.6.43

Comments

[m.ts10806]

foreachの中で毎回DB接続しなければ取得できないような複雑な構成なのでしょうか？
途中で取得不可となった場合にそれ以前の半端なhtmlだけ出力されるマズイ実装も気になります

[kpg]

foreach ($salesdata as $value)で各auto_id(各日報毎のid)を取得し、
sql文での条件にしているため、foreachの中に入れてしまっています。。。

[m.ts10806]

そもそもの$salesdataとやらを取得するときにjoinできそうに思います。

Answer 1

<input class="likeButton" type="image" src="<?php echo ROOT_PATH; ?>images/logo.jpg" onclick="" style="margin:0;     width:24px; height:24px; margin:0; margin-left:3px; border:none;">

let likeButton = $(".likeButton");

likeButton.on('click', function(e){
    console.log(e)
    let $_parent = $( this ).closest( '.icon_cow' );
    $.ajax({
        type: 'POST',
        url: "sales_report_like_done_ajaxPost.php",
        data: {
            auto_id    : $_parent.find("input[name=auto_id]").val(),
            voter_id     : $_parent.find("input[name=voter_id]").val(),
            submitter_id     : $_parent.find("input[name=submitter_id]").val(),
        }
    }); // 結果は使われていないので、「押されたら表示を変える」ならdoneとかで処理。
});

Comments

[kpg]

kei344様
ありがとうございます！ご指摘の内容で修正できました！