different spinboxes for different repeat increments

repeat.html

            <div class="form-group repeat-interval">
                <div data-resize="auto" class="btn-group selectlist pull-left repeat-options">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                    <span class="selected-label">none</span>
                    <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li data-value="none"><a href="#">none</a></li>
                        <li data-value="minutely" data-text="minute(s)"><a href="#">minute(s)</a></li>
                        <li data-value="hourly" data-text="hour(s)"><a href="#">hours(s)</a></li>
                    </ul>
                    <input type="text" aria-hidden="true" readonly="readonly" name="intervalSelectlist" class="hidden hidden-field">
                </div>
                <div class="repeat-panel repeat-every-panel repeat-hourly hide" aria-hidden="true">
                    <label id="MySchedulerEveryLabel" class="inline-form-text repeat-every-pretext">every</label>
                    <div class="spinbox digits-3 repeat-every">
                        <input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MySchedulerEveryLabel">
                        <div class="spinbox-buttons btn-group btn-group-vertical">
                            <button type="button" class="btn btn-default spinbox-up btn-xs">
                            <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">increase</span>
                            </button>
                            <button type="button" class="btn btn-default spinbox-down btn-xs">
                            <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">decrease</span>
                            </button>
                        </div>
                    </div>
                    <div class="inline-form-text repeat-every-text"></div>
                </div>
                <div class="repeat-panel repeat-every-panel repeat-minutely hide" aria-hidden="true">
                    <label id="MySchedulerEveryMinuteLabel" class="inline-form-text repeat-every-pretext">every</label>
                    <div class="spinbox digits-3 repeat-every" data-step=5>
                        <input type="text" class="form-control input-mini spinbox-input" aria-labelledby="MySchedulerEveryMinuteLabel">
                        <div class="spinbox-buttons btn-group btn-group-vertical">
                            <button type="button" class="btn btn-default spinbox-up btn-xs">
                            <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">increase</span>
                            </button>
                            <button type="button" class="btn btn-default spinbox-down btn-xs">
                            <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">decrease</span>
                            </button>
                        </div>
                    </div>
                    <div class="inline-form-text repeat-every-text"></div>
                </div>
            </div>