Некорректно работает JS при добавлении элемента через PHP?

Question

RainoYT @RainoYT

Некорректно работает JS при добавлении элемента через PHP?

Здравствуйте!
Столкнулся с проблемой.
(P.S. У меня сайт не имеет отдельной мобильной версии. Он просто оптимизирован под размер мобильного телефона. На компе и на мобильных у меня разные стили для меню)

У меня есть меню на сайте. Через JS выполняется "подсветка" активного пункта меню.
При определённых условиях, через php добавляется ещё один пункт в меню, но при этом, в мобильной версии сайта "подсветка" (она для десктопной и мобильной версии одна) она начинает работать некорректно. Подсвечивается не выбранный пункт меню, а тот пункт, который на 1 выше выбранного.
Причём на десктопной версии всё работает корректно и если загрузить десктопную версию сайта, а потом сжать сайт до размере телефона (чтобы появилось мобильное меню), то там подсветка работает корректно.
А если сразу загрузится в мобильную версию сайта, то происходит эта ошибка.

Я не очень понимаю, почему она возникает именно когда изначально загружается мобильная версия, а когда из загрузки десктопной сжать в мобильную, то всё в порядке.
Прикладываю коды

HTML:

<ul style="text-align: center;">
        <li><a href="#main">Главная</a></li>
        <li><a href="#about">О нас</a></li>
        <li><a href="#news">Новости</a></li>
        <li><a href="#announcements">Анонсы</a></li>
        <li><a href="#contacts">Контакты</a></li>
	<? if($auth){ ?>
		<li><a href="/panel" style="border: 5px solid white; padding: 15px; background: rgba(0,0,0,0.3);">Личный кабинет</a></li>
	<? } ?>
      </ul>

JS:

var sections = $('section')
	  , headers = $('header')
	  , nav = $('nav')
	  , nav_height = nav.outerHeight();

	$(window).on('scroll', function () {
	  var cur_pos = $(this).scrollTop();
	  
	  sections.each(function() {
	    var top = $(this).offset().top - nav_height,
	        bottom = top + $(this).outerHeight();
	    
	    if (cur_pos >= top && cur_pos <= bottom) {
	      nav.find('a').removeClass('active');
	      sections.removeClass('active');
	      
	      $(this).addClass('active');
	      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
	    }
	  });

	  headers.each(function() {
	    var top = $(this).offset().top - nav_height,
	        bottom = top + $(this).outerHeight();
	    
	    if (cur_pos >= top && cur_pos <= bottom) {
	      nav.find('a').removeClass('active');
	      sections.removeClass('active');
	      
	      $(this).addClass('active');
	      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
	    }
	  });
	});

	nav.find('a[href*="#"]').on('click', function () {
	  var $el = $(this)
	    , id = $el.attr('href');  
	  return false;
	});

CSS:

ul.showMenu {
    position: absolute;
    right: 10px;
    height: auto;
    width: 215px;
    margin: 0;
    background: rgba(45,32,139,0.9);
    text-align: center;
  }
  ul.showMenu li {
    padding: 10px;
    height: auto;
    width: 200px;
    margin: 10px;
    opacity: 1;
    visibility: visible;
  }