动态附加多个猫头鹰轮播2

Question

我刚刚开发了电影列表应用。

我需要添加两个或更多动态猫头鹰轮播。我花了一些时间尝试开发此工具，但没有得到任何结果。

这是我的Javascript，movieList是一些电影详细信息和图像的集合。我将 cate_list 用作外部div。

for (let i = 1; i < movieList.length; i++) {
    topBottomcount++
    var getMediaData = movieList[i].mediaDeta;
    if (getMediaData == undefined) {
        console.log("Data not Available")
    } else {
        count++;
        $('<div class="cate_list' + i + ' film_listing"><div class="col-sm-12"><h2 class="cat_head">' + movieList[i].categoryText + '</h2> </div></div>').appendTo('.search_wrap');
        var cate_list = '.cate_list' + i;
        $('body').find(cate_list).append('<div class="owl-carousel owl-theme owl_caro' + i + '"></div>');
        for (let j = 0; j < getMediaData.length; j++) {
            console.log(getMediaData[j]);
            count++;
            var owl_caro = '.owl_caro' + i;
            $('body').find(owl_caro).append(' <div class="item"><img id="' + getMediaData[j].id + '"class="category' + count + ' top_bottom_foc' + topBottomcount + '"  src="' + getMediaData[j].thumbnailUrl + '"   onError="this.src=\'images/movie_library/avengers.jpg\';"></div>');

        }
        owldraw(owl_caro);
    }

}
function owldraw(owl_caro) {
var owl = $(owl_caro);
owl.owlCarousel({
    margin: 10,
    nav: true,
    loop: true,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 6
        }
    }
});

}

和html

                <section class="search_wrap">


                <div class="col-sm-12">
                    <h2>Movies</h2>
                </div>
                <div class="film_listing">

                </div>
            </section>