Problem displaying some dynamic data using Bootstrap 4 list-group panel

Am working on a User Interface build using Bootstrap 4. I have got some dynamic data which I need to display in list-group-items as a dropdown. The data looks like a tree-like structure.

The highest level is Level 1 which has Level 2 below it, level 2 has level 3 below it. All the levels are filled dynamically in PHP Laravel blade file.

I want to achieve a functionality whereby when the user clicks level 1,, the levels below it should open, after clicking level 2, level 3 should open.

I tried using bootstrap 4 but the U.I is misaligned..

U.I bootstrap list group class that am filling dynamically

<div id="MainMenu">
    <div class="list-group panel">
       <!-- Level 1-->
       @foreach($asm as $a)
      <a href="#demo3" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu" style="color: #868ba1;"> ASM ID : {{ $a['id'] }} <i class="fa fa-caret-down"></i></a>
        @endforeach
       <div class="collapse" id="demo3">

            <!--Level 2 -->
            @foreach($usm as $u)
            <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1"> USM ID : {{ $u['id'] }} <i class="fa fa-caret-down"></i></a>
             @endforeach

            <!--Level 3-->
            <div class="collapse list-group-submenu" id="SubMenu1">
              @foreach($ag as $Agt)
                <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1"> Agent : {{ $Agt['agent_no'] }}<i class="fa fa-caret-down"></i></a>
              @endforeach
            </div>
       </div>
    </div>
</div>

Solution

I suggest you can update two main things here :

Replace the div tags to ul or li as Bootstrap does for list-group in its documentation
Rename the identifiers by something more readable, which allows you to add dynamic indexes

$(document).ready(function() {

  $('[id^="level-1"]').on('shown.bs.collapse', function(e) {
    if ($(this).is(e.target)) { // Prevent other divs react to the expansion
      $(this).parent().addClass('list-group-item-primary');
    }
  }).on('hidden.bs.collapse', function (e) {
    if ($(this).is(e.target)) {
      $(this).parent().removeClass('list-group-item-primary');
    }
  });

});

body { padding : 1em; }

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="MainMenu">
  <!-- Level 1 -->
  <ul class="list-group">
    <!-- @foreach($asm as $a) -->
    <li class="list-group-item">
      <a href="#level-1-item-1" data-toggle="collapse" data-parent="#MainMenu"> ASM ID : 1 <!-- {{ $a['id'] }} --><i class="fa fa-caret-down"></i></a>
      <!-- Level 2 -->
      <ul class="list-group collapse" id="level-1-item-1">
        <!-- @foreach($usm as $u) -->
        <li class="list-group-item">
          <a href="#level-2-item-1" data-toggle="collapse" data-parent="#level-1-item-1"> USM ID : 2 <!-- {{ $u['id'] }} --><i class="fa fa-caret-down"></i></a>
          <!-- Level 3 -->
          <ul class="list-group collapse" id="level-2-item-1">
            <!-- @foreach($ag as $Agt) -->
            <li class="list-group-item">
              <a href="#level-3-item-1" data-toggle="collapse" data-parent="#level-2-item-1"> Agent : 3 <!-- {{ $Agt['agent_no'] }} --><i class="fa fa-caret-down"></i></a>
            </li>
            <!-- @endforeach -->
          </ul> <!-- Level 3 -->
        </li>
        <!-- @endforeach --> 
      </ul> <!-- Level 2 -->
    </li>
    <!-- @endforeach -->
  </ul> <!-- Level 1 -->
</div>