How to reload jQuery plugin (slider / carousel)?

Question

I have 2 buttons with the same function as for receiving data from the API, then convert to html and then add it using jQuery on <div>. Finally, show it using the slick jQuery plugin to show the HTML element as a slider.

However, after pressing the 1st button, if I press the 2nd button (or vice versa), <the slider slickno longer works .

Javascript Code :

$(document).ready(function(){

    /*
    Description  : Handle Day Button Event
    */
    $('.dayList').on("click", function(event)
    {
            var dayChild = $(this).attr('id');

            //::refresh day lline
            $('.hour-to-hour-line').empty();    
            getHourList(dayChild,function()
            {

                /* 
                The Slick
                */
                $('.hour-to-hour-line').slick({
                  dots: false,
                  infinite: false,
                  speed: 1000,
                  slidesToShow: 6,
                  slidesToScroll: 1,
                  focusOnSelect: true,
                  arrows: false,
                  slickSetOption: true
                }); 
          });   
    });
});

HTML code :

<div id="monday" class="dayList" data-daycount = "1" tabindex="1"> Monday </div>
<div id="tuesday" class="dayList" data-daycount = "2" tabindex="2"> Tuesday </div>
<br/>
<div id="hour2" class="hour-to-hour-line"></div>

Function Javascript is , getHourList():

function getHourList(day,callback)
{
    //::convert day to dayCount
    var dayCount = 0;
    switch(day) {
        case "monday":
            dayCount = 1;
            break;
        case "tuesday":
            dayCount = 2;
            break;      
    }

    //::fetch data from API
    jQuery.ajax({
        type: 'GET',
        url: 'http://localhost/api/1.0/schedule/items?day='+dayCount,
        dataType: 'json',
        beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", "Basic WS8fkn5344WN8==");
        },
            success: function (data) 
            {
                //::refresh <div class='hour-to-hour-list'> template
                $('.hour-to-hour-line').empty();                

                //data definition
                var iCounter_1          = 1;
                var iCounter_2          = 1;
                var iCounter_2_next   = 1;
                var timer = [];

                //::exctract time from array=>data
                jQuery.each( data.item, function( key, val ) 
                {                                   
                    timer[iCounter_1] = val.time;       
                    iCounter_1++;           
                });

                //::exract time from array=>timer
                jQuery.each( data.item, function( key, val ) 
                {                   
                    var time         = val.time;        
                    var parent_id = "hour_"+iCounter_2;
                    var hour_id    = "this_hour_"+iCounter_2;
                    var next         = iCounter_2 + 1;

                    $html = 
                    "<div id="+parent_id+" class='fl hour-focus'>"+
                        "<div id="+hour_id+" class='fl kurohige-prev jaman' data-time="+time+">"+time+"-"+timer[next]+"</div>"+
                        "<div class='fl line-0'></div>"+                    
                    "</div>";

                    $('.hour-to-hour-line').append($($html));       
                    iCounter_2++;       

                });
                if (callback)
                {
                    callback();
                }
            }
    });
}

Does anyone have a solution for this?

Answer 1

$('.my-slider')[0].slick.refresh()