php - これらのエントリを区別する方法は?

Question

私が取り組んでいたプロジェクトについて、新たな質問があります。色の異なるセルでグリッドを設計していました。セルがクリックされたときに表示される隠しdivがありますが、1つのセル(そのタイプの最後のセル)のみが表示されることに気付きました。つまり、列「objaffinity」が 0 (「敵」) の 2 つのオブジェクトがある場合、グリッド上に両方の赤いセルが表示されますが、実際には最後のセルのみが機能します。各セルに適切な情報が表示されるようにするにはどうすればよいですか?

ここに私のコードがあります:

mapgen.php:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="cellinfo.js"></script>

<script src="cmenu.js"></script>
<?php
require("sql.php");
$sql = <<<SQL
    SELECT *
    FROM `maps`
    WHERE `objpresent` = 1
SQL;

if(!$result = $db->query($sql)){
    die('There was an error running the query [' . $db->error . ']'); 
} // ran the query
//$xobj = array();
//$yobj = array();
$otype = array();
$oname = array();
$xyobj = array();
while($row = $result->fetch_assoc()){
  $xyobj[$row['x']][$row['y']] = true;
  $otype[$row['id']]=$row['objaffinity'];
   $oname[$row['id']]=$row['object'];
}

// get the rows
$cellid=1;
//find whether the row is obstructed

for ($y = 0; $y < 20; $y++) {
    echo '<tr>';
    for ($x = 0; $x < 25; $x++) {
        echo "<td>";
        //Detect what type of object it is
        if (isset($xyobj[$x][$y])) {

        if($otype[$cellid] == 2)
        {
          echo "<a href='#'> <div class='foe'> </div><div class='foepopup'>";
          echo $oname[$cellid];
            echo "</div></a>";
        }
        elseif($otype[$cellid] == 1)
        {
     echo "<a href='#'><div class='friend'></div><div class='friendpopup'>";
          echo $oname[$cellid];
            echo "</div></a>";
        }
        else
        {
     echo "<a href='#'> <div class='neutral'></div><div class='neutralpopup'>";
          echo $oname[$cellid];
            echo "</div></a>";
        }



            $cellid++;
            }


        echo '</td>';
    }
    echo '</tr>';
}


?>

Cellinfo.js:

$(document).ready(function(){
//initially hide all popups
$(".foepopup").hide();
$(".neutralpopup").hide();
$(".friendpopup").hide();


//foebutton selected
$(".foe").on("click",function(e){
$(".friendpopup").hide();
$(".neutralpopup").hide();
$(".foepopup").show();
});
//close foe when selected
$(".foepopup").on("click",function(e){
$(".foepopup").hide();
});

//neutral button pressed
$(".neutral").on("click",function(e){
$(".foepopup").hide();
$(".friendpopup").hide();
$(".neutralpopup").show();
});
//close neutral
$(".neutralpopup").on("click",function(e){
$(".neutralpopup").hide();
});

//friend button pressed
$(".friend").on("click",function(e){
$(".foepopup").hide();
$(".neutralpopup").hide();
$(".friendpopup").show();
});
//close friend
$(".friendpopup").on("click",function(e){
$(".friendpopup").hide();
});

});