Dynamically displaying data results from left to right in table columns from json array

I wanted to achieve similar result as shown in below image.

Expected result:

Question: Looking for Jquery or javascript solution to dynamically displaying data results from left to right in table columns from json array.

Your help is much appreciated.

Here is my HTML & JSON format and what I am trying to achieve:

<table>
<tr>
    <td rowspan='2'>ID</td>
    <td rowspan='2'>Bagian</td>
    <td colspan='12'>Tahun</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr>
<tbody id="zone_data">
</tbody>

const data = 
  { result: 
    [ { TPM_MESIN_ID: 'CPU-20220115112327418526-20220122140952287412'
      , KOMPONEN: 
        [ { TPM_MESIN_KOMPONEN_ID   : '20220115112327418531-20220122140952462116'
          , TPM_MESIN_KOMPONEN_NAMA : 'CPU01'
          , BERKALA: 
            [ { TPM_BERKALA_ID: '20220127142100262686', TPM_BERKALA_JADWAL_MINGGU: 'M-1',  TPM_BERKALA_JADWAL_BULAN: '1', TPM_BERKALA_PERIODE: '1' } 
            , { TPM_BERKALA_ID: '20220127154027581689', TPM_BERKALA_JADWAL_MINGGU: 'M-13', TPM_BERKALA_JADWAL_BULAN: '6', TPM_BERKALA_PERIODE: '2' } 
            , { TPM_BERKALA_ID: '20220129084334483646', TPM_BERKALA_JADWAL_MINGGU: 'M-28', TPM_BERKALA_JADWAL_BULAN: '9', TPM_BERKALA_PERIODE: '3' } 
          ] } 
        , { TPM_MESIN_KOMPONEN_ID   : '20220115112327418532-20220122140952272413'
          , TPM_MESIN_KOMPONEN_NAMA : 'MNT01'
          , BERKALA: 
            [ { TPM_BERKALA_ID: '20220127142100262698', TPM_BERKALA_JADWAL_MINGGU: 'M-2',  TPM_BERKALA_JADWAL_BULAN: '1',  TPM_BERKALA_PERIODE: '1' } 
            , { TPM_BERKALA_ID: '20220127142100262699', TPM_BERKALA_JADWAL_MINGGU: 'M-12', TPM_BERKALA_JADWAL_BULAN: '5',  TPM_BERKALA_PERIODE: '2' } 
            , { TPM_BERKALA_ID: '20220127142100262700', TPM_BERKALA_JADWAL_MINGGU: 'M-31', TPM_BERKALA_JADWAL_BULAN: '10', TPM_BERKALA_PERIODE: '3' } 
          ] } 
        , { TPM_MESIN_KOMPONEN_ID   : '20220115112327418533-20220122140952428562'
          , TPM_MESIN_KOMPONEN_NAMA : 'KYB01'
          , BERKALA: [] 
      } ] } 
    , { TPM_MESIN_ID: 'CPU-20220115112327418526-20220122140952287555'
      , KOMPONEN: 
        [ { TPM_MESIN_KOMPONEN_ID   : '20220115112327418531-20220122140952462117'
          , TPM_MESIN_KOMPONEN_NAMA : 'CPU02'
          , BERKALA: 
            [ { TPM_BERKALA_ID: '20220127142100262686', TPM_BERKALA_JADWAL_MINGGU: 'M-5', TPM_BERKALA_JADWAL_BULAN: '2', TPM_BERKALA_PERIODE: '1' } ] 
  } ] } ] } 

function createRowHTML()
  { 
  var tableContent = "";
  for (var j = 0; j < data.result.length; j++) 
    {
                        
    }               
  $("tbody#zone_data").html(tableContent);
  }
    
$(function(){createRowHTML();});