JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="filterlist">
    <div id="filter1">
        filter 1 init
    </div>
    <div id="filter2">
        filter 2 init
    </div>
    <div id="filter3">
        filter 3 init
    </div>
</div>

JavaScript

$.widget('ts.filterlist', {
    options: {
        filters: []        
    }
    ,_displaySelected: function() {
        var msg = '';
        for(i in this.options.filters) {
            msg += this.options.filters[i].filter('getSelected') + '\n';
        }
        alert(msg);   
    }
    ,_create: function() {
        var that = this;
        // loop over filter divs and create widgets
        // append filter widgets to 'filters' option for iteration
        $("div",this.element).each(function(){
            that.options.filters.push(
                // init new filter with an id from the dev
                $(this).filter({
                    id:  $(this).attr('id')
                })
            );
        });        
        
        
        // -------  TEST 1 - begin ------------------
        // use js array push to append the value 'test val' to the first filter.  Filters 2 and 3 should remain blank.             
        $(that.options.filters[0]).filter('appendSelected');
        this._displaySelected();        
        // ------- TEST 1 - end --------------------
        
        
        /*
        // ------- TEST 2 - begin -------------------
        // set the selected value in the first filter to 'set val'
        $(that.options.filters[0]).filter('setSelected');
        this._displaySelected();
        
        // then append 'test val' and it only updates the first filter...  Filters 2 and 3 should remain blank
        $(that.options.filters[0]).filter('appendSelected');
        this._displaySelected();     
        // ------- TEST 2 - end ---------------------
        */
    }
});

$.widget('ts.filter', {
    options: {
        id:''
        ,selected: []        
    }
    ,setSelected: function() {
        // without using push, set the selected value of this filter
        this.options.selected = ['set val'];
    }
    ,appendSelected: function() {
        // append new value to the test val
        // ** it ignores the 'this' scope and...