Javascript split array to Chunks

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Company Name Chunking Example</title>
 </head>
 <body>
  <h1>Javascript Array Split into Chunks</h1>
  <table id="output">
   <thead>
    <tr>
     <th>Chunk</th>
     <th>Company Names</th>
    </tr>
   </thead>
   <tbody></tbody>
  </table>
  <script>
   window.addEventListener('DOMContentLoaded', (event) => {
    function chunkArray(array, chunkSize) {
     const chunkedArr = [];
     let index = 0;
     while (index < array.length) {
      chunkedArr.push(array.slice(index, index + chunkSize));
      index += chunkSize;
     }
     return chunkedArr;
    }
    const companyNames = ["Apple", "Microsoft", "Google", "Amazon", "Facebook", "Tesla", "Netflix", "Twitter", "Intel"];
    const chunkSize = 2;
    const chunkedCompanies = chunkArray(companyNames, chunkSize);
    const outputTableBody = document.querySelector('#output tbody');
    chunkedCompanies.forEach((chunk, index) => {
     const row = document.createElement('tr');
     const chunkNumberCell = document.createElement('td');
     const companyNamesCell = document.createElement('td');
     chunkNumberCell.textContent = `Chunk ${index + 1}`;
     companyNamesCell.textContent = chunk.join(', ');
     row.appendChild(chunkNumberCell);
     row.appendChild(companyNamesCell);
     outputTableBody.appendChild(row);
    });
   });
  </script>
  <style>
   body {
    font-family: Arial, sans-serif;
    margin: 20px;
   }

table {
    border-collapse: collapse;
    width: 100%;
   }

th,
   td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
   }

th {
    background-color: #f2f2f2;
   }
  </style>
 </body>
</html>