原生JS实现代码复制 点击按钮始终复制最后一项如何绑定对应片段

你现在的代码逻辑有本质问题：给按钮绑定的点击事件里，会遍历所有.html-code节点，挨个把内容写入剪贴板。而剪贴板的写入是覆盖式的，后写入的内容会直接替换之前的内容，所以不管点哪个按钮，最后执行到最后一个代码块的写入操作时，就会把前面的内容全部覆盖，最终剪贴板里永远是最后一个代码片段的内容。
简单说就是你没有给按钮和对应的代码块做配对，点任意按钮都会触发所有代码块的复制操作。

你的HTML结构本身是有规律的：每个复制按钮和对应的代码块，都同属一个.widget-wrapper父容器，直接利用DOM的亲属关系找对应代码块就行，不需要同时遍历两个节点列表做索引匹配，后续增减代码块也不用改JS逻辑。
修复后的完整JS代码如下，原有CSS和HTML结构不需要做任何修改：

const copyBtns = document.querySelectorAll(".copy-btn");

copyBtns.forEach(copyBtn => {
  copyBtn.addEventListener("click", async function() {
    // 向上查找当前按钮所属的代码区块容器
    const codeWrapper = this.closest(".widget-wrapper");
    // 只在当前容器内查找对应的代码输入框
    const codeNode = codeWrapper.querySelector(".html-code");
    
    try {
      // 去掉代码前后多余的空白字符再复制
      await navigator.clipboard.writeText(codeNode.value.trim());
      // 可选：增加复制成功的按钮提示
      const originalBtnText = this.textContent;
      this.textContent = "已复制";
      setTimeout(() => {
        this.textContent = originalBtnText;
      }, 1500);
    } catch (error) {
      console.error("复制失败，请手动复制:", error);
    }
  })
})

• 用closest()方法从当前按钮节点开始向上查找，匹配最近的.widget-wrapper祖先节点，精准定位当前按钮所属的代码区块，不会串到其他区块
• 限定在当前区块容器内查找代码节点，天然实现按钮和代码块的一对一绑定，没有索引错位的风险，后续增减代码区块只要保持原有结构，不需要修改JS逻辑
• 用async/await处理剪贴板API的异步逻辑，可以方便地添加复制成功/失败的交互反馈
• 复制前对代码内容做trim()处理，能去掉textarea标签自带的前后多余缩进、换行，复制出来的代码格式更整洁

内容的提问来源于stack exchange，提问作者aphan-wd