如何在弹出窗口中添加下一个上一个按钮？

<!-- HTML结构 -->
<div id="popup">
  <h2 id="title"></h2>
  <p id="description"></p>
  <img id="image" src="" alt="">
  <button id="prevButton">上一个</button>
  <button id="nextButton">下一个</button>
</div>

<!-- JavaScript代码 -->
<script>
  // 定义展示内容的数组
  var contentArray = [
    { title: "标题1", description: "描述1", image: "image1.jpg" },
    { title: "标题2", description: "描述2", image: "image2.jpg" },
    { title: "标题3", description: "描述3", image: "image3.jpg" }
  ];

  // 当前展示内容的索引
  var currentIndex = 0;

  // 获取弹出窗口中的元素
  var titleElement = document.getElementById("title");
  var descriptionElement = document.getElementById("description");
  var imageElement = document.getElementById("image");
  var prevButton = document.getElementById("prevButton");
  var nextButton = document.getElementById("nextButton");

  // 更新弹出窗口中的内容
  function updatePopupContent() {
    var currentContent = contentArray[currentIndex];
    titleElement.textContent = currentContent.title;
    descriptionElement.textContent = currentContent.description;
    imageElement.src = currentContent.image;
  }

  // 点击下一个按钮时的操作
  nextButton.addEventListener("click", function() {
    currentIndex++;
    if (currentIndex >= contentArray.length) {
      currentIndex = 0; // 循环展示
    }
    updatePopupContent();
  });

  // 点击上一个按钮时的操作
  prevButton.addEventListener("click", function() {
    currentIndex--;
    if (currentIndex < 0) {
      currentIndex = contentArray.length - 1; // 循环展示
    }
    updatePopupContent();
  });
</script>