Проблема с JavaScript

[Ev0lut1oN 0]

Добрый день. Народ, подскажите пожалуйста, голова пухнет) В общем суть такова... когда стоит внизу страницы 2 JS скрипта, один отвечает за вывод всплывающих/выезжающих окон (libs.js) другой (audioplayer.js) кнопка воспроизведения музыки. При перелистывании на другие страницы стиль исчезает кнопки Play/Pause. Да, если вызываю инициализацию, ставлю вниз страницы перед </body> этот код: 

<script>
 $(function () {
 $('audio').audioPlayer();

 });
 </script>

то, при перелистывании уже стили отображаются, но, как жму Play и перелистываю страницу идёт наслоение кнопки Play друг на друга и воспроизведение не работает.

убираю libs.js, наслоений нет, всё ок, но естественно уже всплывающие окна не отображаются при нажатии. Chatgpt предлагает сделать так чтобы 2 скрипта не конфликтовали между собой:

<script>
    // Используйте noConflict, чтобы запретить использование $ для jQuery
    var jq = jQuery.noConflict();

    // Ваш основной код 
    jq(document).ready(function() {
        
        // Инициализация аудиоплеера
        jq('audio').audioPlayer(); // Убедитесь, что аудиоплеер инициализируется

        // Логика для кнопки Регистрация/Профиль
        jq('.js-show-login').on('click', function(e) {
            e.preventDefault();
            jq('.overlay, .login').fadeIn(200); // Показать окно входа
            jq('body').addClass('modal-is-opened');
        });

        // Закрытие окна
        jq(document).on('click', '.overlay, .login__close', function() {
            jq('.overlay, .login').fadeOut(200); // Закрыть окно
            jq('body').removeClass('modal-is-opened');
        });

        // PJAX обработчики, если они используются
        jq(document).pjax(".wajax", "#wajax", {
            "fragment": "#wajax",
            "push": true,
            "replace": false,
            "timeout": 30000,
            "scrollTo": 0
        });

        // Инициализация аудиоплеера после загрузки PJAX
        jq(document).on('pjax:success', function() {
            jq('audio').audioPlayer(); // Повторная инициализация для динамически загруженного контента
        });
    });
</script>

Пробую заменить его на тот который вызывал инициализацию вниз сайта, Бинго, стили не пропадают не наслаиваются, кнопки всплывающие типа Регистрация/профиль работают, но, не работает теперь Меню через мобильную версию, и не работает кнопка Карандаш (редактирование новости). 

Да, понимаю, может есть куда проще вариант, залез далеко.. Если нужен будет полный код того или иного JS файла, предоставлю. Помогите пожалуйста разобраться с проблемой :)

[master27 41]

	{include file="include/player.tpl"}
    <!--Site Js-->
    <script src="{THEME}/js/libs.js" async></script>
	<script src="{THEME}/js/music_player.js"></script>
    {jsfiles}
    {AJAX}
	<script src="{THEME}/js/jquery.pjax.js"></script>
	<script>
	function documentReady() {
		// Проверяем новости на дле плеер
		$('.js__if-track').has('.dleplyrplayer').each(function () { $(this).addClass('is_track'); });
		$('.js__if-track:not(:has(.dleplyrplayer))').each(function () { $(this).find('.js__story-play, .js__story-download').addClass('hide'); });
		// Если 0, прячем плеер
		if ($('.is_track').length == 0) {$('#sd__player').addClass('hide'); $('.sd__wrapper').css('padding-bottom', '');}
		else { $('#sd__player').removeClass('hide'); $('.sd__wrapper').css('padding-bottom', $('#sd__player').css('height')); updatePlayList(); }
	}; documentReady();
	$(document).pjax('a:not(.no-pjax a):not(.no-pjax)', '.sd__page', { 'fragment': '.sd__page', 'timeout': '6000' });
	$(document).on('pjax:success', function () { documentReady(); $('#overlay').remove(); });
	$(document).on('submit', '.search-form', function (e) { $.pjax.submit(e, '.sd__content', { 'fragment': '.sd__content' }) });
	</script>

Оч. давно тоже мучался. Может поможет, порядок подключения или структура. Дальше сами.