document.addEventListener('DOMContentLoaded', function() {
  const tables = document.querySelectorAll('.w-richtext table');

  tables.forEach(originalTable => {
    // Clone the original table
    const clonedTable = originalTable.cloneNode(true);

    // Create a container for the mobile-friendly tables
    const mobileTablesContainer = document.createElement('div');
    mobileTablesContainer.className = 'mobile-tables-container';

    // Extract headers
    const headers = Array.from(originalTable.querySelectorAll('thead th')).map(th => th.textContent);

    // Process each row in the cloned table
    Array.from(clonedTable.querySelectorAll('tbody tr')).forEach(row => {
      const mobileTable = document.createElement('table');
      mobileTable.className = 'mobile-table';

      // For each cell in the row, create a new row in the mobile table with the header and the cell data
      Array.from(row.cells).forEach((cell, index) => {
        const newRow = mobileTable.insertRow();
        const headerCell = newRow.insertCell();
        headerCell.textContent = headers[index];
        const dataCell = newRow.insertCell();
        dataCell.textContent = cell.textContent;
      });

      mobileTablesContainer.appendChild(mobileTable);
    });

    // Hide the original table on mobile
    originalTable.classList.add('desktop-table');

    // Insert the mobile tables container after the original table
    originalTable.parentNode.insertBefore(mobileTablesContainer, originalTable.nextSibling);
  });
});