Не могу понять, что я делаю не так? Не получается запустить owl-carousel именно в том блоке , который кликнул. По клику у меня д/б инициализация

Вот представление:
@foreach($ppts as $item )
                <div class="mix col-lg-3 col-md-4 col-sm-6 finance">
                    <div class="course-item">
                        <a href=""><div class="course-thumb ppt set-bg" data-id = "{{$item->id}}" data-setbg="{{$item->getImage()}}">
                            <div class="owl-carousel owl-theme" data-id = "{{$item->id}}">
                            @foreach($item->images as $image)
<div class="owl-item" data-id = "{{$image->pptpost_id}}"><img data-id = "{{$image->pptpost_id}}" src="{{$image->getImages()}}" alt=""></div>
                            @endforeach
                            </div>
                        </div>
                        </a>
                        <div class="course-info">
                            <div class="course-text responsive">
                                <h5>     {{   Str::words($item->pptpost_title, '3')}}     </h5>
                                <p>{{$item->desc}}</p>
                                <div class="students">сколь раз скачали?</div>
                            </div>
                            <div class="course-author">
                                <div class="ca-pic set-bg" data-setbg="img/authors/1.jpg"></div>
                                <p>Author <span>Sivkov Alexandr</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- course -->
            @endforeach
Вот Script js
<script type="text/javascript">
    $(document).ready(function () {
        $('.course-thumb.ppt').on('click', function (e) {
            e.preventDefault();
            let id = $(this).data('id');
             owl = $('.owl-carousel[data-id="${id}"]');
          if  (owl){
              $(this).owlCarousel({
                  loop: true,
                  dots: true,
                  margin: 1,
                  items:1
              })
          }
    
                });
    });
</script>