jQuery nclick stop owl carousel in html not working

<div class="owl-carousel" data-margin="30" data-responsive-lg="5" data-responsive-md="4" data-responsive-sm="3" data-responsive-xs="1" data-nav="" data-loop="true" data-autoplay="true">

  <?php foreach($latestprojects as $lp){ ?>
  <div id="singam" class="vertical-item item-gallery content-absolute text-center ds">
    <article class="vertical-item post type-post status-publish format-video has-post-thumbnail content-padding border-rad-5">
      <div>
        <iframe src="https://www.youtube.com/embed/<?=$lp->url?>" allowfullscreen="true">
            </iframe>
      </div>
      <div class="item-meta flex-wrap d-flex ds" id="theng">
        <a href="blog-single-left.html" style="text-align:center" id="chakkap"><?=$lp->name?></a>

      </div>
    </article>

  </div>
  <?php }?>

</div>

$('.owl-carousel').on('click', function(event){
    var $this = $(this);
    if($this.hasClass('clicked')){
      owl.trigger('play.owl.autoplay');
    } else{
    owl.trigger('stop.owl.autoplay');
   }
 });