Материализация css не работает

Question

Я новичок в codeigniter. Я хочу загрузить страницу индекса с заголовком, bodycontent и footer. И я даю некоторую опцию выбора для выборки продукта из базы данных в соответствии с этим конкретным значением. Для этого я использую ajax для загрузки данных для тела.но проблема в том, что $ ("# product_list"). html (html), когда я использую класс coursel-item (materialize css), это не отображает мой продукт, но когда я удаляю его, это работает, пожалуйста, помогите мне.

<div class="carousel" id="product_list">

</div>

<script type="text/javascript">
    $(document).ready(function(){
        var location_id = $('#loc_select').val();
        //alert(location_id);
        get_product_list({location_id: location_id});

    });
    function get_product_list(queryString = false){
        var query = '';
        if(queryString){
            query = queryString;
        }else{
            query = {};
        }
        $.ajax({
                type: 'post',
                url: '<?php echo base_url();?>website/product_list',
                async: true,
                dataType: 'json',
                "data": query,
                success: function(data){

                    var html = '';
                    var i;
                    for(i=0; i<data.length; i++){
                    html +='<div class="carousel-item"style="height:600px">'; 
                    html +=   '<div class="card">';
                    html +=      '<div class="card-image">';
                    html +=            '<div class=" pulse green center-align 
                               right" style="width:70px;height:20px;margin- 
                                left:15px;margin-top:10px;color:white"><span 
                            style="margin-top:-10px"> 
                            <b>'+data[i].discount+'</b> 
                               </span></div>';
                    html +=            '<img src="images/grocery/1.jpg" class="responsive-img">';
                    html +=            '<div class="card-content">';
                    html +=                '<span>'+data[i].product_name+'</span>';
                    html +=                '<h6><span>'+data[i].wait+'</span></h6>';
                    html +=                '<h6><span class="fa fa-inr">'+data[i].price+'</span></h6>';
                    html +=                '<a class="waves-effect waves-light btn-small #ff6d00 orange accent-4 right-align"><i class="material-icons left">local_grocery_store</i>Cart</a>';
                    html +=            '</div>';
                    html +=        '</div>';
                    html +=    '</div>';
                    html +='</div>';

                    }
                    //alert(html);
                    $('#product_list').html(html);
                    //$(html).appendTo('#product_list');
                },
                error: function(){
                    alert('Could not get Data from Database');
                }    
            });

    }   

</script>