2 つの異なる JavaScript データ配列から 2 つの HTML テーブルを構築しようとしています。

最初のテーブルはうまく構築されており、構造も素晴らしく見えますが、2 番目のテーブルにはデータが入力されていません。

名前を調整しようとしましたが、どちらも「tbody」を探しているためだと思います。

これを調整する別の変数はありますか、それとも 2 つの異なるデータ配列から 2 つの別々のテーブルを取得するより良い方法はありますか?

名前を交換し、変更を加えずに ID タグを tbody に追加しました。当初はデータテーブルの名前を変更するつもりでしたが、tbodyを取得する2番目のテーブルの構築により、最初のtbodyのサイズが変更されるだけのようです。

<div style="float: left;margin-right:10px">
    <テーブル>
       <頭>
        <tr align="center">
            <th><h3>名前</h3></th>
            
時刻
            
温度
            
皮をむきます
        </tr>
       </頭>
       <tbody id="tbody"></tbody>
    </テーブル>
</div>

<スクリプト>
定数データ = [
        {名前: "リンゴ"、時間: "25秒"、温度: "100°F"、皮むき: "ピーラー"}、
        {名前: "オレンジ"、時間: "50秒"、温度: "200°F"、皮をむく: "ナイフ"}、
        ]

    const table = document.querySelector('tbody')

    data.forEach((項目) => {
        table.insertAdjacentHTML( 'beforeend', `<tr>
                <td>${item.name}</td>
        <td>${item.time}</td>
                <td>${item.temp} </td>
                <td>${item.peel}</td>

            </tr>`)
    })

</スクリプト>



<div style="float: left">
    <テーブル>
       <頭>
        <tr align="center">
            <th><h3>名前</h3></th>
            
時刻
            
温度
            
皮をむきます
        </tr>
       </頭>
       <tbody></tbody>
    </テーブル>
</div>

<スクリプト>


<スクリプト>
定数データ = [
        {名前: "リンゴ"、時間: "25秒"、温度: "100°F"、皮むき: "ピーラー"}、
        {名前: "オレンジ"、時間: "50秒"、温度: "200°F"、皮をむく: "ナイフ"}、
        ]


    const table = document.querySelector('tbody')

    data.forEach((項目) => {
        table.insertAdjacentHTML( 'beforeend', `<tr>
                <td>${item.name}</td>
                <td>${item.time}</td>
                <td>${item.temp}</td>
                <td>${item.peel}</td>
            </tr>`)
    })

</script>