nickciolpan

// The source of truth should be the element that initializes it.
// Have a default fallback

if ($multiSelect.length > 0) {
    $multiSelect.each(function () {
        let $this = $(this),
            dataset = $this.data(),
            options = defaults;
            
        // Since the number of options can vary,

nickciolpan

<!-- Initializes with default settings -->
<select class="js-multiselect">
    <option />
</select>

<!-- With options (Unspecified options will fallback to default) -->
<select class="js-multiselect" 
    data-include-select-all-option="true" 
    data-all-selected-text="All">
    <option />

nickciolpan

// 1. Namespace js functionality classes with 'js-', 
// never ever attach events to regular class or id. Separation of concers
// 'round-box' can't have some bonus unexpected hover effect. That should be 'js-flips-on-hover'.

// 2. Jquery selectors are expensive browser operations. All should be cached ( saved to variable )
// I'm keeping .class and $selector separated for edge cases in which dom-content is dynamic and can't be cached.

var multiSelectClass = '.js-multiselect'),
    $multiSelect = $(multiSelectClass),
    defaults = {