ループしている各値をクリップボードにコピーできるようにする方法（JavaScript）

Question

前提・実現したいこと

テーブルにループで表示している中のある特定のカラムに対してクリップボードにコピーできるようにしたいのですが、以下の画像のとき２番目の”てすと３”の欄の赤く丸付けているボタンを押すと何も反応しません。(１番目のてすと２の方ではしっかりクリップボードにコピーができます。)

該当のソースコード

<td>
    <div class="d-flex">
        <div id="targetID">{{ request()->fullUrl() }}/ans/{{ $questions->url }}</div>
        <button id="btnCopy" style="border: initial;">
            <p class="m-n1"><i class="far fa-copy fa-fw"></i></p>
        </button>
    </div>
</td>

document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('#btnCopy').addEventListener("click", () => {
        const element = document.querySelector('#targetID'),
            selection = window.getSelection(),
            range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
        console.log('選択された文字列: ', selection.toString());
        const succeeded = document.execCommand('copy');
        if (succeeded) {
            alert('コピーしました');
        } else {
            alert('コピーが失敗しました');
        }
        selection.removeAllRanges();
    });
}, false);

解決策に含め、
どのようにキーワードを使えばいいか分かっていないため、この場合どのような検索キーワードを用いれば良いのか教えていただけるととても嬉しいです。

Answer 1

もしtdないしtrが繰り返し出力されているのでしたら#targetIDと#btnCopyがその件数分だけ出力されているということになります。
「ID」はその名の通り、同じページ内で要素を特定するために利用する属性ですので、1ページ内に複数あってはいけません。
今回のケースだと、ひとまず同じclassをつけて拾うとコードが短く済むと思います。

Comments

[uzu]

回答ありがとうございます！
idを使っていたところ見落としてました、、、
教えていただきありがとうございます！

Answer 2

相対位置のとり方次第ですがこんな感じですかね

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('[data-selector]').forEach(x=>{
const selector=x.dataset["selector"];
x.addEventListener('click',()=>{
const content=x.closest('.d-flex').querySelector(selector).textContent;
(async()=>Object.assign(document.createElement('textarea'),{
textContent:content,
style:'positon:absolute;top:-999px',
}))()
.then(res=>document.querySelector('body').appendChild(res))
.then(res=>void(res.select(),document.execCommand('copy'))||res)
.then(res=>document.querySelector('body').removeChild(res));
});
});
});

</script>
<div class="d-flex">
<div class="targetID">http://127.0.0.1/home/ans/3qe057wg</div>
<button data-selector=".targetID">copy</button>
</div>
<hr>
<div class="d-flex">
<div class="targetID">http://127.0.0.1/home/ans/or49gkn6</div>
<button data-selector=".targetID">copy</button>
</div>

[uzu]

実際にコードまでありがとうございます！
実際に思った通りに実装できました。ありがとうございます！