如何将id从删除按钮传递到弹出的删除按钮

<!-- HTML代码 -->
<table>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td><button class="delete-btn" data-id="1">删除</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane Smith</td>
    <td><button class="delete-btn" data-id="2">删除</button></td>
  </tr>
  <!-- 更多行... -->
</table>

<!-- JavaScript代码 -->
<script>
  // 获取所有的删除按钮
  const deleteButtons = document.querySelectorAll('.delete-btn');

  // 为每个删除按钮添加点击事件
  deleteButtons.forEach(button => {
    button.addEventListener('click', () => {
      // 获取按钮所在行的id值
      const id = button.getAttribute('data-id');

      // 在弹出的删除按钮中使用id进行操作
      // 例如发送Ajax请求到后端进行删除操作
      // 这里只是一个示例，具体操作根据实际需求来实现
      console.log(`删除id为${id}的数据`);

      // 弹出删除按钮的逻辑
      // 可以是一个模态框或者一个确认对话框
      // 这里只是一个示例，具体实现根据实际需求来实现
      alert(`确定要删除id为${id}的数据吗？`);
    });
  });
</script>