ひとつのJavaScript記述で複数対応したい

質問

お世話になります。
下記スクリプトの改良する点を教えていただきたいです
何十件と続くリストの中から選択したinputタグの中身をコピーしたいと考えています。
いろいろチャレンジしているのですが、正解を導き出せず、困っています。
ご教授よろしくお願いします。
<!--　JavaScript -->
function copyToClipboard() {
// コピー対象をJavaScript上で変数として定義する
var copyTarget = document.getElementById("copyTarget[可変する数字]");
// コピー対象のテキストを選択する
copyTarget.select();
// 選択しているテキストをクリップボードにコピーする
document.execCommand("Copy");
// コピーをお知らせする
alert("コピーできました！ : " + copyTarget.value);
}
<!-- HTML内-->
<div class="list"><input name="url" type="text" value="https://www.aaaaaaaaaaa.com/img/2020/8/3333333.jpg" id="copyTarget1" style="width:96%;" /><input type="button" id="copy" value="クリップボードへコピーする" onclick="copyToClipboard()"></div>
<div class="list"><input name="url" type="text" value="https://www.aaaaaaaaaaa.com/img/2020/8/2222222.jpg" id="copyTarget2" style="width:96%;" /><input type="button" id="copy" value="クリップボードへコピーする" onclick="copyToClipboard()"></div>
以下ループで続く...

回答No.1

babu_baboo · ベストアンサー

<style>
　div.list input[name="url"] { box-sizing: border-box; width:100%; }
</style>

<div class="list">
　<input name="url" value="https://www.aaaaaaaaaaa.com/img/2020/8/3333333.jpg">
　<input type="button" value="クリップボードへコピーする">
</div>
<div class="list">
　<input name="url" value="https://www.aaaaaaaaaaa.com/img/2020/8/2222222.jpg">
　<input type="button" value="クリップボードへコピーする">
</div>

--

function copyToClipboard (e) {
　alert("そのうちコピーできなくなります！ : " + e.value);
}

function handler (event) {
　let e = event.target;
　if ('button' === e.type) {
　　let div = e.closest ('div.list');
　　if (div) {
　　　let target = div.querySelector ('input[name="url"]');
　　　if (target) {
　　　　copyToClipboard (target);
　　　}
　　}
　}
}

document.addEventListener ('click', handler, false);