Doesn't work multiple selects in one form

[ghost]

Version: last from master Problem: values not selected with attribute data-selected for others seletcs, and change in one component modify value in first

Look video

Add manualy event listener for selects not help me

Code

    <div class="mdl-grid">
        <form id="general-form" method="post" action="/example">
            <!-- first select in form -->
            <div class="mdl-cell mdl-cell--12-col">
                <div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield getmdl-select">
                    <input class="mdl-textfield__input" value="" id="firstSelect" readonly/>
                    <input value="" type="hidden" name="firstSelect"/>
                    <label class="mdl-textfield__label" for="firstSelect"> First Select </label>
                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="firstSelect">
                        <li class="mdl-menu__item" data-val="1" data-selected="true"> Item #1</li>
                        <li class="mdl-menu__item" data-val="2"> Item #2</li>
                        <li class="mdl-menu__item" data-val="3"> Item #3</li>
                    </ul>
                </div>
            </div>

            <!-- other selects with input -->
            <div class="mdl-cell mdl-cell--12-col">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <label class="mdl-textfield__label" for="input1"> Input one</label>
                    <input type="text" class="mdl-textfield__input"
                           id="input1" name="input[1]"
                           value="Example input 1">
                </div>
                <div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield getmdl-select">
                    <input class="mdl-textfield__input" value="" id="select1" readonly/>
                    <input value="" type="hidden" name="select1"/>
                    <label class="mdl-textfield__label" for="select1"> Select 1 </label>
                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="select1">
                        <li class="mdl-menu__item" data-val="1"> Item #1</li>
                        <li class="mdl-menu__item" data-val="2" data-selected="true"> Item #2</li>
                        <li class="mdl-menu__item" data-val="3"> Item #3</li>
                    </ul>
                </div>
            </div>
            <div class="mdl-cell mdl-cell--12-col">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <label class="mdl-textfield__label" for="input2"> Input two</label>
                    <input type="text" class="mdl-textfield__input"
                           id="input2" name="input[2]"
                           value="Example input 2">
                </div>
                <div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield getmdl-select">
                    <input class="mdl-textfield__input" value="" id="select2" readonly/>
                    <input value="" type="hidden" name="select2"/>
                    <label class="mdl-textfield__label" for="select2"> Select 2 </label>
                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="select2">
                        <li class="mdl-menu__item" data-val="1"> Item #1</li>
                        <li class="mdl-menu__item" data-val="2"> Item #2</li>
                        <li class="mdl-menu__item" data-val="3" data-selected="true"> Item #3</li>
                    </ul>
                </div>
            </div>
        </form>
    </div>

Error in developers console:

Uncaught TypeError: Cannot read property 'change' of undefined at setSelectedItem (getmdl-select.js:33) at getmdl-select.js:177 at NodeList.forEach () at Object._addEventListeners (getmdl-select.js:161) at getmdl-select.js:184 at NodeList.forEach () at Object.init (getmdl-select.js:183) at whenLoaded (getmdl-select.js:5) setSelectedItem @ getmdl-select.js:33 (anonymous) @ getmdl-select.js:177 _addEventListeners @ getmdl-select.js:161 (anonymous) @ getmdl-select.js:184 init @ getmdl-select.js:183 whenLoaded @ getmdl-select.js:5 load (async) (anonymous) @ getmdl-select.js:9 (anonymous) @ getmdl-select.js:12

[ghost]

Remove defer attribute for loading MDL library

<head>
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>

https://github.com/CreativeIT/getmdl-select/pull/94