Isotope Multiple Select Javascript

<style>
    /* Color shapes */
    .color-shape {
        width: 70px;
        height: 70px;
        margin: 5px;
        float: left;
    }

    .color-shape.round {
        -webkit-border-radius: 35px;
        -moz-border-radius: 35px;
        border-radius: 35px;
    }

    .color-shape.big.round {
        -webkit-border-radius: 75px;
        -moz-border-radius: 75px;
        border-radius: 75px;
    }

    .color-shape.red {
        background: red;
    }

    .color-shape.blue {
        background: blue;
    }

    .color-shape.yellow {
        background: yellow;
    }

    .color-shape.wide,
    .color-shape.big {
        width: 150px;
    }

    .color-shape.tall,
    .color-shape.big {
        height: 150px;
    }

    .color-shape a {
        display: block;
        height: 100%;
    }

    .color-shape a:hover {
        background: white;
        background: hsla(0, 0%, 100%, 0.5);
    }
</style>

<div id="form-ui" class="row">

    <div class="c-select col-xs-12 col-sm-2" data-filter-group="color">
        <select>
            <option value="">Color</option>
            <option value=".red">Red</option>
            <option value=".blue">Blue</option>
            <option value=".yellow">yellow</option>
        </select>
    </div>

    <div class="c-select col-xs-12 col-sm-2" data-filter-group="size">
        <select>
            <option value="">Size</option>
            <option value=".small">Small</option>
            <option value=".wide">Wide</option>
        </select>
    </div>

    <div class="c-select col-xs-12 col-sm-2" data-filter-group="shape">
        <select>
            <option value="">Shape</option>
            <option value=".round">Round</option>
            <option value=".square">Square</option>
            <option value=".tall">Tall</option>
            <option value=".big">Big</option>
        </select>
    </div>

    <div id="js-filter-results-total"></div>

    <!--           <div class="c-select col-xs-12 col-sm-3" data-filter-group="example">
<select>
<option value="">Example</option>
<option value=".example1">Example 1</option>
<option value=".example2">Example 2</option>
<option value=".example3">Example 3</option>

</select>
</div> -->
</div>

<div class="grid">

    <div class="grid__sizer"></div>

    <div class="color-shape small round red"></div>

    <div class="color-shape small round blue"></div>

    <div class="color-shape small round yellow"></div>

    <div class="color-shape small square red"></div>

    <div class="color-shape small square blue"></div>

    <div class="color-shape small square yellow"></div>

    <div class="color-shape wide round red"></div>

    <div class="color-shape wide round blue"></div>

    <div class="color-shape wide round yellow"></div>

    <div class="color-shape wide square red"></div>

    <div class="color-shape wide square blue"></div>

    <div class="color-shape wide square yellow"></div>

    <div class="color-shape tall round red"></div>

    <div class="color-shape tall round blue"></div>

    <div class="color-shape tall round yellow"></div>

    <div class="color-shape tall square red"></div>

    <div class="color-shape tall square blue"></div>

    <div class="color-shape tall square yellow"></div>

    <div class="color-shape big round red"></div>

    <div class="color-shape big round blue"></div>

    <div class="color-shape big round yellow"></div>

    <div class="color-shape big square red"></div>

    <div class="color-shape big square blue"></div>

    <div class="color-shape big square yellow"></div>

    <div class="color-shape small round red"></div>

    <div class="color-shape wide round red"></div>

    <div class="color-shape tall round red"></div>

    <div class="color-shape big round red"></div>

    <div class="color-shape small square red"></div>

    <div class="color-shape wide square red"></div>

    <div class="color-shape tall square red"></div>

    <div class="color-shape big square red"></div>

    <div class="color-shape small round blue"></div>

    <div class="color-shape wide round blue"></div>

    <div class="color-shape tall round blue"></div>

    <div class="color-shape big round blue"></div>

    <div class="color-shape small square blue"></div>

    <div class="color-shape wide square blue"></div>

    <div class="color-shape tall square blue"></div>

    <div class="color-shape big square blue"></div>
</div>

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<script>
    /*
Example Isotope setup
init Isotope
*/
    var elem = document.querySelector('.grid');
    var iso = new Isotope(elem, {
        itemSelector: '.color-shape',
        percentPosition: true,
        masonry: {
            // columnWidth: 100,
            // fitWidth: true
        }
    });
    // if blocks are replaced with images
    imagesLoaded(elem).on('progress', function() {
        iso.layout();
    });
    // Filter
    (function() {
        // get references to select list and display text box
        var $selectFilters = document.querySelectorAll('#form-ui select'),
            $resultsTotal = document.getElementById('js-filter-results-total'),
            filters = {};
        // get selected option
        function getSelectedOption(sel) {
            var opt;
            for (var i = 0, len = sel.options.length; i < len; i++) {
                opt = sel.options[i];
                if (opt.selected === true) {
                    break;
                }
            }
            return opt;
        }
        // loop all selects
        for (i = 0; i < $selectFilters.length; i++) {
            // add change event to each select
            $selectFilters[i].addEventListener('change', function(event) {
                // get option form select event
                var opt = getSelectedOption(event.target);
                // get the data fitler group then the value
                var selectGroup = fizzyUIUtils.getParent(event.target, '.c-select');
                filters[selectGroup.dataset.filterGroup] = opt.value;
                var isoFilters = [];
                for (var group in filters) {
                    isoFilters.push(filters[group])
                }
                var selector = concatValues(isoFilters);
                // or
                //var selector = isoFilters.join('');
                console.log(selector);
                iso.arrange({
                    filter: selector
                });
                var total = iso.getFilteredItemElements();
                $resultsTotal.innerHTML = total.length;
                return false;
            });
        }
    }());

    function concatValues(obj) {
        var value = '';
        for (var prop in obj) {
            value += obj[prop];
        }
        return value;
    }
</script>