scroll Infinite in Laravel js+css

Question

Devs, I’m having a problem listing cards, at the moment I’m working with ul and li.

i work with css to hide the horizontal scroll:

 body,
  html {
    height: 100%;
  }

  div.wrap {
    height: 100%;
    overflow: hidden;
  }

  body {
    overflow: hidden;
  }

HTML:

<div class="infinite-scroll">

  <ul class="list-group connectedSortable item-drop" style="padding-bottom:35px; max-height:500px; height:auto;" id="{{ $kanban->id }}">
    @if(!empty($apontamentos) && $apontamentos->count())
    @foreach($aguardando as $value1)

    @if($value1->kanban_id == $kanban->id)

     <li class="list-group-item card" item-id="{{ $value1->id }}" style="cursor: move;background-color:#fff;">

      <div class="float-right p-1">
        <span class="btn-group dropleft">
          <a class="" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
            <img class="avatar" src="{{ asset($value1->user->perfilImagem) }}" title="{{$value1->user->name}}">

              @foreach($value1->participante as $item)
              <img class="avatar" src="{{ asset($item->user->perfilImagem) }}" title="Participante">
                @endforeach

          </a>

              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item addParticipanteModal" data-id="{{$value1->id}}">Adicionar Participante</a>
                <a class="dropdown-item updateResponsavel" data-id="{{$value1->id}}">Alterar Responsável</a>
              </div>

       </span>
       </div>
          <h6 class="pb-5">{{ $value1-> atividade}} </h6>
     @endforeach
     @endif
  </ul>
  
  {{ $aguardando-> links()}}
</div>

JS:

        function onscreen(node) {
          var vbottom = $(window).scrollTop() + $(window).height() + 200;
          var bottom = node.offset().top + node.outerHeight();
          return (bottom <= vbottom);
        }

        $('.infinite-scroll').each(function() {
          var scrollable = $(this);
          var paginator = scrollable.find('.pagination');
          var loading = false;

          $(window).on('scroll', function() {
            /*
                The paginator is used as trigger to execute the next load:
                when it is visible, I am at the bottom of the page
            */
            if (onscreen(paginator) && loading == false) {
              loading = true;
              var next = paginator.find('li.active + li a');
              paginator.remove();

              $.ajax({
                url: next.attr('href'),
                method: 'GET',
                dataType: 'HTML',
                success: function(data) {
                  var d = $(data).find('.infinite-scroll');
                  scrollable.append(d.children());
                  paginator = scrollable.find('.pagination');
                  loading = false;
                }
              });
            }
          });
        });

the problem is, he’s breaking

HTML "inspect":

what I wanted to do, is the Infinite scroll works inside UL and only replicates LI and not UL, why besides breaking the layout it replicates UL and only works in the scroll of the page and not in UL.