如何通过ID在弹出窗口中显示数据库内容(使用Foreach)

<div id="popup" style="display: none;">
  <h2>数据库内容</h2>
  <p id="data"></p>
</div>

<button class="data-item" data-id="1">显示数据1</button>
<button class="data-item" data-id="2">显示数据2</button>
<button class="data-item" data-id="3">显示数据3</button>

// 获取所有需要显示数据的按钮元素
const dataItems = document.querySelectorAll('.data-item');

// 为每个按钮元素添加点击事件监听器
dataItems.forEach(item => {
  item.addEventListener('click', () => {
    // 获取被点击按钮的ID值
    const id = item.getAttribute('data-id');

    // 发送ID值到后端
    // 这里使用了axios库发送AJAX请求的示例代码
    axios.post('/get-data', { id })
      .then(response => {
        // 接收后端返回的数据
        const data = response.data;

        // 将数据填充到弹出窗口中的相应位置
        const popupData = document.getElementById('data');
        popupData.textContent = data;

        // 显示弹出窗口
        const popup = document.getElementById('popup');
        popup.style.display = 'block';
      })
      .catch(error => {
        console.error(error);
      });
  });
});