from a controller in Laravel I’m trying to create a pivot table that opens and closes as needed but I can’t understand where the problem is. the masterzone opens and closes but subarea and microarea don’t and I don’t know why.. can anyone sleep where I’m doing wrong?

Controller

$audits = DB::table('esiti_audit')
                ->where('frequency_audit', "DAY")
                ->select(['master_zone', 'subarea', 'microarea', 'data_audit', 'esito'])
                ->orderBy('master_zone', 'asc')
                ->orderBy('subarea', 'asc')
                ->orderBy('microarea', 'asc')
                ->orderBy('data_audit', 'desc')
                ->get()
                ->toArray();

            $data = [];

            foreach ($audits as $audit) {
                $data[$audit->master_zone][$audit->subarea][$audit->microarea][] = [
                    'esito' => $audit->esito,
                    'data_audit' => $audit->data_audit
                ];
            }

Blade

 @foreach ($data as $masterZone => $subareas)
      <h2 onclick="toggleSection('{{ $masterZone }}')">
    {{ $masterZone }}</h2>
 <div id="{{ $masterZone }}" style="display: none;">
       <table>
            @foreach ($subareas as $subarea => $microareas)
                  <tr>
                     <td colspan="3"
    onclick="toggleSection('{{ $subarea }}')">
     <h3>{{ $subarea }}</h3>
       </td>
   </tr>
   <tr id="{{ $subarea }}"
     style="display: none;">
      @foreach ($microareas as $microarea => $audits)
   <tr>
   <td colspan="2"
            onclick="toggleSection('{{ $subarea . $microarea }}')">
          <h3>{{ $microarea }}</h3>
         </td>
        </tr>
    <tr id="{{ $subarea . $microarea }}"
  style="display: none;">
        @foreach ($audits as $audit)
         <tr>
    <td>{{ $audit['esito'] }}</td>
     <td>{{ $audit['data_audit'] }}</td>
                    </tr>
               @endforeach
               </tr>
       @endforeach
        </tr>
  @endforeach
   </table>
    </div>
   @endforeach

JS

<script>
    function toggleSection(elementId) {
        var element = document.getElementById(elementId);
        if (element.style.display === "none") {
            element.style.display = "table-row";
        } else {
            element.style.display = "none";
        }
    }
</script>

in this screen montaggio and spedizioni are the main masterzones and they work but the related subareas and microareas have already exploded I would like to be able to make them explode and implode at will like I do for the first ones but I can’t thank you all very much