Получение ошибки неопределенной переменной при динамическом заполнении некоторых данных с использованием JavaScript в Laravel

Question

Работа над проектом Laravel, посредством которого я собираю некоторые данные из бэкэнда. Данные находятся в иерархической / древовидной структуре с наивысшим значением asm, затем usm, затем ag. Каждая из переменных представляет собой коллекцию ассоциативных массивов, в которой каждый массив имеет уникальный идентификатор и набор политик. В представлении я разделил его на 2 столбца (используя схему сетки начальной загрузки), в основном левый столбец (col-md-4) и правый столбец (col-md-8).

В левом столбце (col-md-4) я использовал складные меню начальной загрузки, чтобы отобразить массивы в иерархической структуре, когда пользователь нажимает на верхний массив. В правом столбце (col-md-8) отображаются соответствующие политики ТОЛЬКО КОГДА пользователь наводит курсор мыши или щелкает тег ссылки привязки соответствующего asm, usm или ag (который имеет динамический идентификатор) в левом столбце col-md- 4.

При наведении указателя мыши на определенный элемент появляется эта ошибка на вкладке консоли. ReferenceError: asmData не определена

//asm variable (level 1)
array:3 [▼
  0 => array:3 [▼
    "id" => "157"
    "unit_sales" => array:7 [▶]
    "policies" => array:3144 [▶]
  ]
  1 => array:3 [▼
    "id" => "73401"
    "unit_sales" => array:1 [ …1]
    "policies" => array:8 [ …8]
  ]
  2 => array:3 [▼
    "id" => "6511"
    "unit_sales" => array:7 [ …7]
    "policies" => array:1987 [ …1987]
  ]
]

//usm variable (level 2)
array:3 [▼
  0 => array:3 [▼
    "id" => "1525"
    "ag" => array:10 [▶]
    "policies" => array:374 [▶]
  ]
  1 => array:3 [▼
    "id" => "74696"
    "ag" => array:12 [▶]
    "policies" => array:496 [▶]
  ]
  2 => array:3 [▼
    "id" => "47060"
    "ag" => array:1 [▶]
    "policies" => array:129 [▶]
  ]
]

//ag variable (level 3)
array:3 [▼
  0 => array:2 [▼
    "agent_no" => "42184"
    "policies" => array:38 [▶]
  ]
  1 => array:2 [▼
    "agent_no" => "21718"
    "policies" => array:59 [▶]
  ]
  2 => array:2 [▼
    "agent_no" => "78863"
    "policies" => array:3 [▶]
  ]
]

Левый столбец с раскрывающимся списком начальной загрузки

<div class="col-md-4">
  <!--RSM looged in (See ASM downwards)-->
  @if(isset($asm, $usm , $ag))
    <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" data-toggle="collapse" data-parent="#MainMenu" id="{{ $a['id'] }}"> Agency Sales Managers ID : {{ $a['id'] }} </a>
            <div class="collapse" id="demo{{$i}}">
            <!-- Level 2 -->
            @foreach($usm as $u)
              <a href="#SubMenu{{$i}}" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#SubMenu1" style="color: red;" id="{{ $u['id'] }}"> Unit Sales Managers ID : {{ $u['id'] }} <i class="fa fa-caret-down"></i></a>

              <div class="collapse list-group-submenu" id="SubMenu{{$i}}">
                <!-- Level 3 -->
                  @foreach($ag as $Agt)
                    <a href="#SubSubMenu1{{$i}}" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1" id="{{ $Agt['agent_no'] }}"> Agents Number : {{ $Agt['agent_no'] }}</a>
                  @endforeach
               <!-- END level 3-->
              </div>
              @endforeach 
              <!--END level 2-->
            </div>
         @php $i++; @endphp
        @endforeach
        <!-- END level 1-->
      </div> 
    </div>
  @endif
</div>

Правая колонка, где политики заполняются динамически

<div class="col-md-8">
 <table class="table table-hover mg-b-0 tx-11" id="summary-table">
    <thead>
      <tr>
        <th>POLICIES</th>
      </tr>
    </thead>
      <tbody>
        <tr> <!-- Add policies dynamically via JS --></tr> 
      </tbody>
</table>
</div>

JavaScript-код, который я использую

<script>
//Returns true if asm , usm and ag variables are set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>
      $( document ).ready(function() {
          var asmData = {!! json_encode($asm) !!};
          var usmData = {!! json_encode($usm) !!};
          var agData = {!! json_encode($ag) !!};
      });

      $(document).on("mouseenter", "a", function() {
          //Execute ASM
          var asmPolicies = '';
          //Fetch id of a tag in the DOM
          var asmId = $(this).attr('id');
          for(var i = 0; i < asmData.length; i++) {
              if(asmId == asmData[i]['id']) {
                  for(var j = 0; j < asmData[i]['policies'].length; j++){
                      asmPolicies += '<tr><td>' + asmData[i]['policies'][j] + '</td></tr>';
                  }
              }

          }
          $('#summary-table tbody tr').html(asmPolicies);
          //END ASM

          //Execute USM
          var usmPolicies = '';
          //Fetch id of a tag in the DOM
          var usmId = $(this).attr('id');
          for(var i = 0; i < usmData.length; i++) {
              if(usmId == usmData[i]['id']) {
                  for(var j = 0; j < usmData[i]['policies'].length; j++){
                      usmPolicies += '<tr><td>' + usmData[i]['policies'][j] + '</td></tr>';
                  }
              }

          }
          $('#summary-table tbody tr').html(usmPolicies);
          //END USM

          //Execute agents
          var agPolicies = '';
          //Fetch id of a tag in the DOM
          var agId = $(this).attr('id');
          for(var i = 0; i < agData.length; i++) {
              if(agId == agData[i]['agent_no']) {
                  for(var j = 0; j < agData[i]['policies'].length; j++){
                      agPolicies += '<tr><td>' + agData[i]['policies'][j] + '</td></tr>';
                  }
              }

          }
          $('#summary-table tbody tr').html(agPolicies);
          //END Agents
      });
<?php } ?>
</script>