проблема с html-разделением

#html #bootstrap-4 #collapse

Вопрос:

Я попытался свернуть динамически созданный элемент div, но все выглядит как обычно, но не может работать. Цель моих дочерних дивов-щелкнуть и запустить другую процедуру хранилища, а затем отобразить другую таблицу внутри div.

Мой html-код таков:

 <tbody>

  @if (ViewBag.TableData != null)
   {
       var xItem = (mystoreprocedure_for_myuserlist)item;
      foreach (var item in ViewBag.TableData)
       {
          <tr>
           <td style="text-align:center">
            <a href="#collapse-userdata-@xItem.UserId" 
           class="text-success"   
           data-toggle="collapse" 
           role="button" 
           aria-expanded="false" 
           aria-controls="collapse-userdata-@xItem.UserId" ><i class="fa fa-plus" ></i> </a>
           </td>
            <td> @xItem.UserName</td>
            <td>@xItem.UserLocation</td>
            <td> @xItem.UserType</td>
        </tr>
        <tr> 
           <td></td>
             <td colspan="3"> 
              <div class="collapse" id="collapse-userdata-@xItem.UserId">
                 <div class="card card-body d-block">
                   <a href="#collapse-userdetaymenu-@xItem.UserId"
                     class="text-success"
                     data-toggle="collapse"
                     role="button"
                     aria-expanded="false"
                     aria-controls="collapse-userdetaymenu-@xItem.UserId"
                     data-ajax="true"
                     data-ajax-mode="replace"
                     data-ajax-update="#userdetaymenu-div-@xItem.UserId"
                     data-ajax-loading="#loading-userdetay-@xItem.UserId"
                      data-ajax-url="@Url.Action("GetUserDetayForFilters", new { baslamaTarihi = ViewBag.StartDate,bitisTarihi= ViewBag.EndDate,userId= xItem.UserId.ToString(), shiftIds=ViewBag.shiftIds }))"
            ></a>
 <span id="loading-userdetay-@xItem.UserId" style="display:none;"> <i class="fas fa-spinner fa-spin"></i> User Details</span>
 <div class="collapse" id="collapse-userdetaymenu-@xItem.UserId">
          <div id="userdetaymenu-div-@xItem.UserId"></div>
 </div>
  </div>

    </div>
   </td>
 </tr>
           
       }
   }

</tbody>

 

Также мои данные классов объектов mystoreprocedure_for_myuserlist являются:

        [Key]
        public Guid UniqId { get; set; }
        public int UserId { get; set; }
        public string UserLocation{ get; set; }
        public string UserType{ get; set; }

 

Как я могу работать с collapse div ?