I am writing a training online store. How to display products separately?

Question

JavaScript

var cart = {};
function init() {
  $.getJSON("cargo.json", disCharge);
}
function disCharge(data) {
  console.log(data);
  var out='';
  for(var key in data) {
        out += `<div class="product product-grid">
                                        <div class="product-media">
                                            <div class="product-thumbnail">
                                                <a href="product-fullwidth.html" title="">
                                                    <img src="${data[key].img_1}" alt="" class="current">
                                                    <img src="${data[key].img_2}" alt="">
                                                </a>
                                            </div>
                                            <!-- /.product-thumbnail -->


                                            <div class="product-hover">
                                                <div class="product-actions">
                                                    <a href="#" class="awe-button product-add-cart" data-toggle="tooltip" title="Add to cart">
                                                        <i class="icon icon-shopping-bag"></i>
                                                    </a>

                                                    <a href="#" class="awe-button product-quick-whistlist" data-toggle="tooltip" title="Add to whistlist">
                                                        <i class="icon icon-star"></i>
                                                    </a>

                                                    <a href="#" class="awe-button product-quick-view" data-toggle="tooltip" title="Quickview">
                                                        <i class="icon icon-eye"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <!-- /.product-hover -->



                                        </div>
                                        <!-- /.product-media -->

                                        <div class="product-body">
                                            <h2 class="product-name">
                                    <a href="#" title="Gin Lane Greenport Cotton Shirt">${data[key].name}</a>
                                </h2>
                                            <!-- /.product-product -->

                                            <div class="product-category">
                                                <span>${data[key].description}</span>
                                            </div>
                                            <!-- /.product-category -->

                                            <div class="product-price">

                                                <span class="amount">${data[key].cost}</span>

                                            </div>
                                            <!-- /.product-price -->
                                        </div>
                                        <!-- /.product-body -->
                                    </div>
                                    <!-- /.product -->`                                 
  $('.disCharge').html(out);

Hello everyone. I am writing a training online store. I am trying to display products in a slider (owl-carousel), if I display the slider through the selector, its markup collapses, if in a separate div inside the slider, all products fall into one item. How to display them separately?