Multiselect list update with ajax on filter

Below is the code that is executed after ajax call. So what is happening here is it is re-initialising everything (with correct data) but closes the filter text box

                        var ddlStoresHtml = '';                             
                    ddlStoresHtml = '<select id="ddlStores" class="mdb-select colorful-select dropdown-default" multiple searchable="Type here to search ...">'
                                        +'<option value="" disabled selected>Choose store(s)</option>';                                 
                    if($('#jsonDdlStores').text()!=''){                        
                    var jsonDdlStores = JSON.parse($('#jsonDdlStores').text());
                    $.each(jsonDdlStores.storesList, function(i, store) {
                        ddlStoresHtml+='<option value="'+store.storeNumber+'">'+store.storeNumber+' - '+store.storeName+'</option>';
                    });
                    }               
                    ddlStoresHtml+= '</select><button class="btn-save btn btn-default btn-sm" onclick="closeMultiSelect(this,event)">Done</button>';
                    $('#ddlStoresContainer').html(ddlStoresHtml);
                    var defaultStore;
                    if(jsonData!=null){
                    $("#ddlStores option:selected").prop("selected", false)
                    $.each(jsonData.stores, function(i, val) {
                        $('#ddlStores option[value="'+ val.store + '"]').prop('selected', true);
                        if(val.default){
                            defaultStore=val.store;
                        }
                    });                 
                    }else{
                    $("#ddlStores option:selected").prop("selected", false)
                    }

                    $('#ddlStores').materialSelect();
                    $('#ddlStores').closest('div.row').find('li.select-toggle-all').css('display','none');