Проблема с отображением динамических данных в 2 столбцах в начальной загрузке

Question

Я работаю над приложением, в котором я получаю некоторые данные на сервере и отображаю их в представлении.В представлении я разделил на 2 столбца (используя систему сетки начальной загрузки).В левом столбце (col-md-4) я перебираю переменную и показываю идентификатор конкретного агента.

Я хочу добиться функциональности, при которой когда идентификатор конкретного агента отображается в левом столбце, все продажи отображаются в правом столбце (col-md-8) в теге tbody таблицы. То же самое следует повторить для последующих агентов (должно отображаться только после выделения идентификатора)

Массив ниже хранится в переменной asm

array:4 [▼
  0 => array:3 [▼
    "id" => "157"
    "unit_sales" => array:7 [▶]
    "sales" => array:3 [
      0 => "RL************"
      1 => "RL************"
      2 => "RL************"
    ]
  ]
  1 => array:3 [▼
    "id" => "73401"
    "unit_sales" => array:8 [ …8]
    "sales" => array:3 [
      0 => "RL************"
      1 => "RL************"
      2 => "RL************"
    ]
  ]
  2 => array:3 [▼
    "id" => "0"
    "unit_sales" => array:1 [ …1]
    "sales" => array:3 [
      0 => "RL************"
      1 => "RL************"
      2 => "RL************"
    ]
  ]
  3 => array:3 [▼
    "id" => "76300"
    "unit_sales" => array:1 [ …1]
    "sales" => array:3 [
      0 => "RL************"
      1 => "RL************"
      2 => "RL************"
    ]
  ]
]

Макет

<div class="row">
  <!-- lEFT column -->
  <div class="col-md-4">
   <div id="MainMenu">
    <div class="list-group panel">
      <!-- Level 1 -->
      @php
        $i = 1;
      @endphp
      @foreach($asm as $a)
       <a href="#demo{{$i}}" class="list-group-item list-group-item-primary" > Sales ID : {{ $a['id'] }} <i class="fa fa-caret-down"></i></a>
       @php $i++; @endphp
      @endforeach
      <!-- END level 1-->
    </div> 
  </div>
</div>
<!-- END left column-->

<!-- Right column-->
<div class="col-md-8">
      <table id="summary-table">
          <thead>
          <tr>
              <th>Sales</th>
          </tr>
          </thead>
          <tbody>
          <tr>
              <td> <!-- Add dynamic sales--></td>
            </tr> 
          </tbody>
      </table>
</div>
<!-- END-->
</div>