tdタグの要素を取得したいが一行目の値しか取得ができない

Question

前提・実現したいこと

初歩的なことかもしれませんが、、
選択ボタンをクリックした際に、クリックした行の値を取得したいが、
どの行をクリックしても、みかんとA1の値が取得されてしまいます。

よろしくお願いいたします。

該当のソースコード

                   <table class="table table-hover table-bordered" id="table">
                        <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
                            <tr>
                                <th scope="col" class="text-center">選択</th>
                                <th scope="col" class="text-center">商品名</th>
                                <th scope="col" class="text-center">商品CDCD</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="somerow">
                                <td class="text-center">
                                    <button class="btn btn-success ml-2" type="button" onclick="btnClick();">選択</button>
                                </td>
                                <td>みかん</td>
                                <td>A1</td>
                             </tr>
                             <tr id="somerow">
                                <td class="text-center">
                                    <button class="btn btn-success ml-2" type="button" onclick="btnClick();">選択</button>
                                </td>
                                <td>メロン</td>
                                <td>B1</td>
                             </tr>
                      </tbody>
                 </table>

<script type="application/javascript">
        function btnClick() {
            var Row = document.getElementById("somerow");
            var Cells = Row.getElementsByTagName("td");
            const name = Cells[1].innerText;
            const cd = Cells[2].innerText;
        }
</script>

試したこと

tdタグの中の値を取得したが、全て１列目の　みかんとA1しか取得されない

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

理由はidがユニークに運用されていないからです。
html要素にonclickを埋め込むならthisを渡してやるとよいです

function btnClick(obj) {
  var Row = obj.closest('tr');
  var Cells = Row.getElementsByTagName("td");
  const name = Cells[1].innerText;
  const cd = Cells[2].innerText;
  console.log([name,cd]);
}

として、

<button class="btn btn-success ml-2" type="button" onclick="btnClick(this);">選択</button>

のように呼び出す

Comments

[meron88]

早速のご回答ありがとうございます。
解決いたしました!