我目前正在尝试切换一个div，以显示和隐藏时，用户点击一个按钮，它目前的工作。然而，当我使用一个for循环显示一些数据列表，切换按钮仅显示和隐藏列表中第一组数据的div，而不显示和隐藏其余数据。在for循环中有多个相同的按钮，每个按钮都应该切换显示列表中当前数据的div，而不是第一个。
这是因为id对所有的divs都是一样的吗如果是这样的话我该怎么去解决这个问题呢？
代码：

<div class = "profile">
 {% for i in profile %}
 <button onclick="toggle()">Show Form</button>
 ...
 <div class ="form" id = "toggle_display">
  <form method="POST" enctype="multipart/form-data">
      <input type="text" name="username">
      <button class="uploadPost" type="submit">submit</button>
  </form>
 </div>
 {% endfor %}
</div>

Javascript：

function toggle() {
  var x = document.getElementById("toggle_display");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}