JavaScriptでフォームのコピーボタンをDB一覧のidひとつずつに付ける方法（PHP使用）

Question

下記のコードを書いたら複数行呼び出したデータベースの1番目のテキストしかコピーできませんでした。
それぞれにDBのidが割り振られたボタンを押したら、それぞれのフォームのテキストをコピーできるようにするにはどのようにすればよいですか？
もう何日も悩んでます。
https://norm-nois.com/blog/archives/4312
というページを参考にしています。
id.phpファイル
script.jsファイルを冒頭にrequire onceで読み込んでいます。

<form> （以下はforで複数行と複数ボタンを呼び出し） <input type="text" id="<?php echo 'copy'.$id; ?>" value="<?php echo $text; ?>"> <button id="<?php echo 'copybtn'.$id; ?>">Copy</button> <script> let id = <?php echo $id; ?>; </script> （for文はここまで） </form>

script.jsファイル
function txtCopy() {
var tgt = document.getElementById(copy${id});
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
const range = document.createRange();
range.selectNode(tgt);
window.getSelection().addRange(range);
document.execCommand('copy');
} else {
tgt.select();
document.execCommand('copy');
}
alert("[id=" + ${id} + "] is copied.");

}

var trg = document.getElementById(bopybtn${id});

trg.addEventListener('click',txtCopy);

Comments

[gratitudeman]

ご回答ありがとうございました。
しかしご回答を参考にコードを次のように変更しましたが、まったくボタンが反応しませんでした。

Uncaught ReferenceError: コピー番号 is not defined
at 何々。
Uncaught SyntaxError: Identifier 'コピー番号' has already been declared
というエラーが発生しました。

.phpのコード
<script type="text/javascript">
let copy_num = <?php echo $コピーid変数（フォームごとにidが異なる）; ?>;
let copy_btn_num = <?php echo $ボタンのid（ボタンごとにidが異なる）; ?>;
</script>
jsのコード

function hogecopy(){

let targetEle = document.getElementById(copy_num);

if(navigator.clipboard){

navigator.clipboard.writeText(targetEle.innerHTML).then(function(){

console.log('copied.');
},function(){

console.log('clipboard denied.');
});
}else if(window.clipboardData){

}else if(document.execCommand){

}else{

console.log('Can not copy. No permission and execCommand died.');
}
}

const btnCopy = document.getElementById(copy_btn_num);
btnCopy.addEventListener('click', function(){
hogecopy();
});

Answer 1

execCommandはすでに非推奨のメソッドなのでクリップボードAPIへのシフトをおすすめします

• クリップボード API - Web API | MDN