Owl carousel stops working after getting external page content using jQuery '.load()'

I have already configured owl carousel and it is working on the page, But on .load() the same content into another page externally, It is not working. I have tried different methods and practices, still, it is not working for me. Any solution?

// Dynamic model content 
/* It is taking modal content from page shop-single-modal.html and loads into target div*/
$("body").on("click", '[data-toggle="modal"]', function () {
// Target Modal
let targetDiv = $($(this).data("target") + " .modal-body");

// Remote Modal ID from attribute value: data-remote="value"
let modalId = $(this).data("remote");

// Target Modal Heading
$($(this).data("target") + " .modal-header h4").text(
`Modal remote Id is : ${modalId}`
);

// Target modal content replaced with the modal content loaded via specific path
targetDiv.load(
`shop-single-modal.html ${$(this).data("target")} .modal-body`
);
});

// Owl Config in pug
.product-carousel.owl-carousel.gallery-wrapper.dots-inside#qv-main
    a(href='img/shop/single/01.jpg' data-size='1000x667' data-sub-html=".caption1").item
    img(src='img/shop/single/01.jpg' alt='Product')
    a(href='img/shop/single/02.jpg' data-size='1000x667' data-sub-html=".caption2").item
    img(src='img/shop/single/02.jpg' alt='Product')
    a(href='img/shop/single/03.jpg' data-size='1000x667' data-sub-html=".caption3").item
    img(src='img/shop/single/03.jpg' alt='Product')
    a(href='img/shop/single/04.jpg' data-size='1000x667' data-sub-html=".caption4").item
    img(src='img/shop/single/04.jpg' alt='Product')
    a(href='img/shop/single/05.jpg' data-size='1000x667' data-sub-html=".caption5").item
    img(src='img/shop/single/05.jpg' alt='Product')

// Owl Js config
var sync1 = $("#qv-main");
sync1.owlCarousel({
    items: 1,
    slideSpeed: 2000,
    nav: true,
    autoplay: true,
    dots: true,
    loop: true,
    responsiveRefreshRate: 200,
});

Never mind! I had already solved this problem years ago. Today, I was checking out my overflow account. I saw this question has no answer yet.

The problem was I used ID. eg; var sync1 = $("#qv-main");

Use of CLASS, instead of ID, , It has fixed the issue. I am able to use many times the same carousel on different sections with the same script.