有多个document.execCommand('copy')，只有第一个有效？

Question

页面有多个id=txt，现在只有第一个有效。
我希望都有效，能实现吗？
谢谢。

   <button onclick="copy()">复制1</button>
   <p id="txt">第一段内容</p>
   <textarea name="" id="jsTextArea" cols="30" rows="10" style='opacity: 0;position: absolute;' ></textarea>

 <button onclick="copy()">复制2</button>
   <p id="txt">第二段内容 </p>

<script type="text/javascript">
   function copy() {
       const copyElement = document.getElementById('txt');
       const textareaElement = document.getElementById('jsTextArea');
       textareaElement.innerText = copyElement.innerHTML;
       textareaElement.select();
       document.execCommand('copy');
   }
</script>

Answer 1

id 选择器是唯一的，同一个 id 只能用一次，所以上下文只能有个id 是 txt 的元素，你多个元素用同一个 id 是不规范的
还有你的第一个 textarea 把下面的 button 按钮盖住了，导致下面的 button 按钮永远无法被点击

<div class="copy-wrapper">
 <button onclick="copy()">复制1</button>
   <p class="copy-p">第一段内容</p>
   <textarea name="" class="copy-input" cols="30" rows="10" style='opacity: 0;position: absolute; width: 0; height: 0;' ></textarea>
</div>
<div class="copy-wrapper">
 <button onclick="copy()">复制2</button>
   <p class="copy-p">第二段内容</p>
   <textarea name="" class="copy-input" cols="30" rows="10" style='opacity: 0;position: absolute; width: 0; height: 0;' ></textarea>
</div>

function copy(e) {
  const btn = event.target // 拿到当前 dom
  const wrapper = btn.parentNode // 拿到父元素
  const copyP = wrapper.querySelector('.copy-p') // 拿到父元素下面的 p
  const copyInput = wrapper.querySelector('.copy-input') // 拿到父元素下面的 textarea
  console.log(copyInput)
  copyInput.value = copyP.innerHTML
  copyInput.select()
  document.execCommand('copy', true)
   }

Answer 2

一个文档流中, id是唯一的, 同一id只能有一个, 换成class就可以了