Пропадает форма поиска при уменьшении широты экрана

В js новичок, углубляться в язык не буду, так что с этим туго.

Такое дело, есть форма поиска на сайте https://imgur.com/a/MZ4engv, которую при максимальной ширине экрана 1199px убираю и вместо него ставлю кнопку мобильного поиска, при нажатии на которую появляется форма поиска https://imgur.com/a/Kid9GnK.

А проблема состоит в том, что после повторного нажатия на кнопку поиска когда пропадает форма, при уменьшении ширины экрана пропадает кнопка мобильного поиска, но форма не появляется https://imgur.com/a/CeXY8nl.

Вот js код:

let mobileSearch = document.getElementById('mobile-search');
let searchForm = document.getElementById('search-form');
let headerInput = document.getElementById('header__input');
let bannerBackground = document.getElementById('banner-background');

mobileSearch.addEventListener("click", function() {
  if(searchForm.style.display == 'block') {
    searchForm.style.display = 'none';
    bannerBackground.classList.remove('banner-before');
  }
  else {
    searchForm.style.display = 'block';
    bannerBackground.classList.add('banner-before');
    headerInput.focus();
  }
});

И вот также как я "пытался" решить эту проблему:

let mobileSearch = document.getElementById('mobile-search');
let searchForm = document.getElementById('search-form');
let headerInput = document.getElementById('header__input');
let bannerBackground = document.getElementById('banner-background');
let x = window.matchMedia("(max-width: 1199px)");

function myMediaQuery(x) {
  if (x.matches) {
    mobileSearch.addEventListener("click", function() {
      if(searchForm.style.display == 'block') {
        searchForm.style.display = 'none';
        bannerBackground.classList.remove('banner-before');
      }
      else {
        searchForm.style.display = 'block';
        bannerBackground.classList.add('banner-before');
        headerInput.focus();
      }
    });
  }
}

x.addListener(myMediaQuery);

Всем ответившим заранее спасибо.