Javascript PHP循环上的隐藏/显示函数

我正在使用PHP循环创建一个论文列表模板。但是，我需要的内容被隐藏，直到它被点击。问题是，它只影响了第一个内容。甚至我也点击了其他内容。它对第一个内容作出反应。有什么方法可以单独制作吗

<script>
   function contentRead() {
    var x = document.getElementById("content");
     if (x.style.display === "block") {
         x.style.display = "none";
     } else {
         x.style.display = "block";}
   }   
</script>

<div class="Book">
 <?php foreach($blog as $row) : ?>
  <div class="chapter" onclick="contentRead()">
    <div class="cover"></div>
    <h2 class="title"><?= $row ["title"];?></h2>
    <p class="essay" id="content" style="display:none"><?= $row ["content"];?></p>
  </div>
 <?php endforeach ?>
</div>

函数contentRead（）{
var x=document.getElementById（“内容”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“块”}
}   

您需要将

移动到循环外部，并让它接受一个ID作为第一个参数，以便可以重用它。然后，在你的循环中，给每个项目一个唯一的ID。一个常用的方法就是不断增加一个变量

函数contentRead（id）{
var x=document.getElementById（id）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}
id
属性在文档中必须是唯一的。这里有多个
id=“content”
。
内容应该在循环之外，我将其放在循环之外，但结果仍然相同。