可编辑的 div 仅显示 foreach 循环中的第一个 div 元素

Question

我试图获取可编辑 div 的内容，但无论我单击哪个 div，它都只会获取第一个 div 的内容。

我的代码：

//$ff is array that has sql data stored

foreach ($ff as $data) {

  //$somedata is php variable and it's data

  // keep changing as it's fetching name from database

  echo "<h4 class='editme' id='grid' contentEditable='true'>{$data['name']}</h4>";

        }

    

 echo "<script>

     $('h4.editme').click(function(){

      var content = $('#grid').html();

       console.log(content);

        });

 </script>";

当我单击 div 时它确实在控制台中打印数据（并且它使 div 可编辑）但它只显示第一个 div 内容的输出，无论我是否单击第一个 div，第二个等等它只显示第一个分区输出。

例如，

我在网站上的数据是

NameA

NameB

NameC

NameD

.....

NameH

显示这 10 个名称后，我单击 NameD，它使它成为可编辑的 div，并且在控制台上它打印出来，NameA而不是无论我单击什么 div。

所有这些 div 都具有相同的等id，classname因为我在检查代码时检查了我网站上的 html 代码。如何使 div 在可编辑时打印正确的 div 内容？

Answer 1

foreach ($ff as $key=>$data) { //$ff is array that has sql data stored&nbsp; echo "<h4 class='editme' id='grid{$key}' contentEditable='true'>{$data['name']}</h4>"; //$somedata is php variable and it's data keep changing as it's fetching name from database}echo "<script>$('h4.editme').click(function(){var content = $(this).html();console.log(content);});</script>";