Добрый день!
Помогите, кто может, уже пол дня сижу...

Есть сайт, первая всплывающая форма регистрации, она у меня нормально работает.
Есть еще всплывающая форма входа в личный кабинет. Вот это форма никак не работает. Т.е. работает только одна форма из двух. Именно ее ищет JS по селектору.

Вот кусочек из index.php, где мои 2 формы:


Это форма регистрации

        <div class="regist">          
          <button class="regist-close" type="button" title="Закрыть">Закрыть</button>
          <h2>Регистрация</h2>
          <form class="regist-form" action="reg.php" method="post">
            <div class="regist-form-group">
              <label for="fio">Как Вас зовут</label>
              <input type="text" name="fio" id="fio" class="fio" placeholder="ФИО">
            </div>
            <div class="regist-form-group">
              <label for="email">Ваш E-mail </label>
              <input type="text" name="email" id="email" class="email" placeholder="E-mail">
            </div>
            <div class="regist-form-group">
              <label for="pass">Введите пароль </label>
              <input type="text" name="pass" id="pass" class="pass" placeholder="Пароль">
            </div>
            <div class="regist-form-group">
              <label for="pass_d">Повторите пароль </label>
              <input type="text" name="pass_d" id="pass_d" class="pass_d" placeholder="Повторите пароль">
            </div>          
            <button class="submit" type="submit">Зарегистрироваться</button>        
          </form>
        </div> 

Это форма входа в личных кабинет

        <div class="login">          
            <button class="regist-close" type="button" title="Закрыть">Закрыть</button>
          <h2>Регистрация</h2>
          <form class="login-form" action="entry.php" method="post">
            <div class="regist-form-group">
              <label for="email">Ваш E-mail </label>
              <input type="text" name="email" id="email" class="email" placeholder="E-mail">
            </div>
            <div class="regist-form-group">
              <label for="pass">Введите пароль </label>
              <input type="text" name="pass" id="pass" class="pass" placeholder="Пароль">
            </div>
            <button class="submit" type="submit">Войти в личный кабинет</button>        
          </form>
        </div>

Это меню, которое мы выбираем:

         <nav class="main-navigation">
            <ul>
              <li><a class="reg"  href="form.html">Регистрация</a></li> 
              <li><a class="ent" href="form2.html">Личный кабинет</a></li>
            </ul>
          </nav>

Это js где мы форму делаем видимой:

  var link = document.querySelector('.main-navigation .reg');
  var subm = document.querySelector('.regist .submit');
  var popup = document.querySelector('.regist');
...

  link.addEventListener('click', function(event) {
    event.preventDefault();
    popup.classList.add('regist-show');//открыли форму
    var temp = 0;
   ...
 

Тоже самое я делаю для form2, только вместо .reg пишу .login, но не работает!!! Работает только одна форма. Сообщение что form2 не найдена. Обе сразу нету (((.
Как можно решить а? :unsure: