저는 2개의 서로 다른 JavaScript 데이터 배열로 2개의 HTML 테이블을 만들려고 합니다.

첫 번째 테이블은 잘 만들어지고 구조도 좋아 보이지만 두 번째 테이블에는 데이터가 채워지지 않습니다.

네이밍을 조정해봤는데 두 번 다 "tbody"를 검색하고 있어서 그런 것 같아요.

이를 조정할 수 있는 또 다른 변수가 있나요? 아니면 2개의 서로 다른 데이터 배열에서 2개의 별도 테이블을 가져오는 더 좋은 방법이 있을까요?

이름을 바꾸고 tbody에 ID 태그를 추가했는데 변경 사항이 없습니다. 원래는 데이터 테이블의 이름을 바꾸려고 했는데 tbody를 잡는 두 번째 테이블의 구성으로 인해 첫 번째 tbody의 크기만 조정되는 것 같습니다.

<div style="float: left;margin-right:10px">
    <table>
       <thead>
        <tr align="center">
            <th><h3>Name</h3></th>
            <th><h3>Time</h3></th>
            <th><h3>Temp</h3></th>
            <th><h3>Peel</h3></th>
        </tr>
       </thead>
       <tbody id="tbody"></tbody>
    </table>
</div>

<script>
const data = [  
        {name: "Apple", time: "25sec", temp: "100F", peel: "Peeler"},
        {name: "Orange", time: "50sec", temp: "200F", peel: "Knife"},
        ]

    const table = document.querySelector('tbody')

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

            </tr>`)
    })

</script>



<div style="float: left">
    <table>
       <thead>
        <tr align="center">
            <th><h3>Name</h3></th>
            <th><h3>Time</h3></th>
            <th><h3>Temp</h3></th>
            <th><h3>Peel</h3></th>
        </tr>
       </thead>
       <tbody></tbody>
    </table>
</div>

<script>


<script>
const data = [  
        {name: "Apple", time: "25sec", temp: "100F", peel: "Peeler"},
        {name: "Orange", time: "50sec", temp: "200F", peel: "Knife"},
        ]


    const table = document.querySelector('tbody')

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

</script>