Не работает маска ввода

Есть некий select, от выбора которого зависит какие 2 инпута будут выведены.

                        <select name="auth-select" id="auth-select"></p>
                        <option value="login" class="opt-login">Логин и пароль</option>
                        <option value="email" class="opt-email">Email и пароль</option>
                        <option value="phone" class="opt-phone">Номер телефона и пароль</option>
                        <option value="card" class="opt-card">№Карты и пин код</option>
                        </select>

К нему скрипт вывода этих инпутов

<script>
 $(document).ready(function(){
$('#auth-select').change(function(){
    if ($('#auth-select option:selected').hasClass("opt-login")) {
        $("#select-div").html("<input id='login' type='text' name='login' \
           class='enter-login' required> \
          <input id='pass' type='text' name='pass' class='enter-login'> \
          <button>SEND</button>")
} elseif ($("#auth-select option:selected").hasClass("opt-email")) {
        $("#select-div").html(..........................

ну и так далее. Скрипт работает. Все меняется как надо.

Только вот под эти инпуты еще стоит скрипт маски ввода. Что-то типа:

<script>
            $(document).ready(function() {
                $("#pin").inputmask("9999");
                $("#phone").inputmask("+7(999)9999999");
                ..................
                ..................
 </script>

Много масок. На других страницах, на чистом HTML все маски работают. Тут же не хочет. Подскажите в чем может быть дело. И как можно сделать, чтобы и селект был и маска работала.