HTML / Javascript テキストコピーボタンを複数作成する

前提・実現したいこと

HTMLにてコピーボタンを作成し、javascriptの関数で選択した項目をコピーしようとしています。

html
1<!DOCTYPE html>
2<html lang="; ja; ">
3<meta charset="; shift-jis; ">
4<title></title>
5</head>
6<body>
7<h2>Memo</h2>
8<br>
9<h3>Linux Command List</h3>
10</body></html>
11<table border="1" class="dataframe">
12  <thead>
13    <tr style="text-align: center; background-color:#FFCC66">
14      <th>Number</th>
15      <th>Action</th>
16      <th>Command</th>
17    </tr>
18  </thead>
19  <tbody>
20    <tr>
21      <td>1</td>
22      <td>コマンド１</td>
23      <td><input id="copyTarget" type="text" value="ls -l" readonly>
24          <button onclick="copyToClipboard()">Copy Command</button>
25          </td>
26    </tr>
27    <tr>
28      <td>2</td>
29      <td>コマンド2</td>
30      <td><input id="copyTarget" type="text" value="pwd" readonly>
31          <button onclick="copyToClipboard()">Copy Command</button>
32          </td>
33    </tr>
34        <script>
35        function copyToClipboard() {
36            var copyTarget = document.getElementById("copyTarget");
37            copyTarget.select();
38            document.execCommand("Copy");
39            alert("Copied: " + copyTarget.value);
40        }
41    </script>
42  </tbody>
43</table>
44

発生している問題・エラーメッセージ

以下が同じであるため、２項目のコマンドがコピーされません。

id="copyTarget"

以下を開放できればいいと思うのですが、適切なコマンドが見つからず・・・。

copyTarget.select()

idを変更せずに複数Copy Functionを使用する方法はありますでしょうか。

以上、よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

IDは重複してはいけません。別のIDをつけましょう。

html
1<!-- 抜粋 -->
2    <tr>
3      <td>1</td>
4      <td>コマンド１</td>
5      <td><input id="copyTarget1" type="text" value="ls -l" readonly>
6          <button onclick="copyToClipboard(1)">Copy Command</button>
7          </td>
8    </tr>
9    <tr>
10      <td>2</td>
11      <td>コマンド2</td>
12      <td><input id="copyTarget2" type="text" value="pwd" readonly>
13          <button onclick="copyToClipboard(2)">Copy Command</button>
14          </td>
15    </tr>
16    <script>
17        function copyToClipboard(index) {
18            var copyTarget = document.getElementById("copyTarget" + index);
19            copyTarget.select();
20            document.execCommand("Copy");
21            alert("Copied: " + copyTarget.value);
22        }
23    </script>