Filtering dynamic data with MixItUp

Question

I am trying to filter data that are dynamically created in AJAX call back method using MixItUp. I have 10 sections each having one or more filter. The problem I am facing is that when i click a filter of one section all other sections data get hidden . When I checked the DOM , the overriding to display none to block is not happening. The filter values are all unique.

    // The "bindHandlers" method will listen for whenever a button is clicked. 
bindHandlers: function () {
    var self = this;
    self.$filters.on('click', 'a', function (e) {
        self.parseFilters();
    });
},

parseFilters: function () {
    var self = this;
    // loop through each filter group and grap the active filter from each one.
    for (var i = 0, group; group = self.groups[i]; i++) {
        group.active = [];
        group.$inputs.each(function () {
            if ($(this).find('.selected').length > 0) {
                group.active.push($(this).attr('data-filter'));
            }
        });
    }
    self.concatenate();
},

concatenate: function () {
    var self = this;

    self.outputString = ''; // Reset output string

    for (var i = 0, group; group = self.groups[i]; i++) {
        self.outputString += group.active;
    }

    // If the output string is empty, show all rather than none:    
    !self.outputString.length && (self.outputString = 'all');

    // Send the output string to MixItUp via the 'filter' method:    
    if (self.$container.mixItUp('isLoaded')) {
        self.$container.mixItUp('filter', self.outputString);
    }
}

The code above is written in the AJAX call back function and the click event fires the parseFilter function and reached concatenate and the outputString contains the correct filter name only still it hides all other sections tiles which confuses me .

Can anyone help me. As far as what i understood from my googling , we need to set data-filter with one value and give the same value as class name of filtered element. Also i am using Knockout to bind the data

Answer 1

Finally i was able to make it happen. I don't know its the perfect solution and all but i did it like this.

For each sections where there are two divs , one for filter buttons and second one for report tiles, i gave unique class ( filter div) and id ( report tiles) and in the AJAX call back function I binded the code like this

function SetSectionOneData() {

var $container = $('#SectionOneReports'), // Report tiles holding container id. 
$controls = $('.cd-tab-filter');  // Filter button holding div

$container.mixItUp({
    animation: {
        duration: 700,
        effects: 'fade translateY(600%) stagger(35ms)',
        easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
        reverseOut: true
    },
    controls: {
        enable: false
    }
});

$controls.on('click', '.filter', function () {
    var $btn = $(this),
        filter = $btn.attr('data-filter');
     $btn.addClass('FltrBtn_active'); 
    var btnId = $btn.attr('id');
    if (btnId) {
        var productId = btnId.split('_')[1];
        var linkId = btnId.split('_')[2];
        $('*[id*=Filter_' + productId + ']:visible').each(function () {
            if ($(this).attr('id').split('_')[2] != linkId) {
                $(this).removeClass('FltrBtn_active');
            }
        });
    }
    $container.mixItUp('filter', 'none', function () {
        $container.mixItUp('filter', filter);
    });
});

}

If anyone finds that there is a better / optimized solution, please let me know.

Anyway thank you all