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

Question

我试图获取可编辑 div 的内容，但无论我单击哪个 div，它都只会获取第一个 div 的内容。我的代码：//$ff is array that has sql data storedforeach ($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，第二个等等它只显示第一个分区输出。例如，我在网站上的数据是NameANameBNameCNameD.....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

  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>";