(function() {
    function init(selectorEl) {
        if (!selectorEl) return;
        
        let inputEl = selectorEl.getElementsByTagName('input')[0];
        let valEl = selectorEl.getElementsByClassName('guests-selector-value')[0];
        let upArrowEl = selectorEl.getElementsByClassName('guests-selector-up')[0];
        let downArrowEl = selectorEl.getElementsByClassName('guests-selector-down')[0];

        inputEl.onchange = function() {
            valEl.textContent = inputEl.value;
            upArrowEl.style.display = inputEl.value >= inputEl.max ? 'none' : '';
            downArrowEl.style.display = inputEl.value <= inputEl.min ? 'none' : '';
        };

        let changeEvent;
        if (typeof (Event) === 'function') {
            changeEvent = new Event('change');
        } else {
            changeEvent = document.createEvent('Event');
            changeEvent.initEvent('change', true, true);
        }

        // set initial value to valEl
        inputEl.dispatchEvent(changeEvent);

        upArrowEl.onclick = function() {
            if (inputEl.value >= inputEl.max) return;
            inputEl.value++;
            inputEl.dispatchEvent(changeEvent);
        };

        downArrowEl.onclick = function() {
            if (inputEl.value <= inputEl.min) return;
            inputEl.value--;
            inputEl.dispatchEvent(changeEvent);
        };
    };

    $(function() {
        let selectorElements = document.getElementsByClassName('guests-selector');
        for (let i = 0; i < selectorElements.length; i++) {
            let selectorEl = selectorElements[i];
            init(selectorEl);
        }
    });
})();