Почему некорректно работают некоторые popover Bootsrap 5

Некоторые поповеры некорректно отображаются, не могу понять в чем дело.
Как выглядит большая часть поповеров (как должно): (https://i.paste.pics/L5P7V.png)
Как выглядит баганная часть, которую нужно исправить (https://i.paste.pics/L5P9X.png)
Вот код HTML (используется Blade от Laravel):

<div class="appointments">
    @foreach ($value as $keyel => $el)
        @php 
            $itemID = $el['id'];
            $status = $el['status'];
        @endphp
            <div class="appointment @if($status == 1) counter @endif"  data-status="{{$status}}"  data-time="{{$keyel}}" 
            @if($status == 1) data-bs-toggle="popover" data-bs-placement="top" data-bs-content-id="{{$itemID}}" tabindex="0" 
            @endif role="button" style="--counter: @if($status == 1)'{{count($el['elems'])}}'@endif">
                @if($status == 1)
                    <div id="{{$itemID}}" class="d-none">
                        @foreach ($el['elems'] as $item)
                            <div class="popover-appointment" id="appointment{{$item['id']}}">
                                <div class="d-flex flex-row doctor-info">
                                    <div class="text d-flex flex-column">
                                        <p>{{$item['name']}}</p>
                                        <p>
                                            @foreach ($item['post'] as $posts)
                                                {{$posts}}
                                            @endforeach
                                        </p>
                                        <p>Кабинет: {{$item['cabinet']}}</p>
                                    </div>
                                </div>
                                <div class=" d-flex flex-column justify-content-center">
                                    @csrf
                                    <div class="d-flex flex-row align-items-center appointments-type">
                                        <label for="">Прием:</label>
                                        <select id="select{{$item['id']}}" name="type" class="col-6 flex-end form-select">
                                            <option value="1" >Первичный</option>
                                            <option value="2" >Повторный</option>
                                        </select>
                                    </div>
                                    <input type="submit" class="btn btn-outline button-submit" id="{{$item['id']}}" value="Записаться на прием">
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
    @endforeach
</div> 

js:

const list = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    let popover = [];
    function popoverPool (el){
        let opts = {
            html: true,
            trigger: 'click',
            animation: true,
            sanitize: false, 
        }
        if (el.hasAttribute('data-bs-content-id')) {
            opts.content = document.getElementById(el.getAttribute('data-bs-content-id')).innerHTML;
            console.log(el.getAttribute('data-bs-content-id'));
            opts.html = true;
            opts.sanitize = false;
        }
        popover.push(new bootstrap.Popover(el, opts));
    }
    list.map(popoverPool);