JQuery: first не выбирает первое, а второе

У меня есть сценарий JQuery, который отправляет запрос с использованием AJAX на следующий URL-адрес https://djjohal.video/video/671/index.html#gsc.tab=0, который содержит информацию о видео-песне.

На самом деле я хочу проанализировать и получить все подробности из содержимого html, которое я получил в вызове AJAX.

HTML-страница содержит всего 3 div's, каждый из которых имеет класс «.глава», и среди них содержимое первого div - это название песни, которую я хочу получить. Поэтому для этого я попытался использовать селектор :первый JQuery следующим образом: $(PAGE).find("div.class:first").text();, где СТРАНИЦА - это проанализированный объект HTML.

Что он делает, так это то, что вместо выбора фактического первого div он выбирает второй div с классом глава, который содержит бесполезную информацию.

Вот мой код JavaScript

function action(){
    let url = `https://djjohal.video/video/671/index.html#gsc.tab=0`;

    LOG_INFO( "REQUEST SENT..." );

    $.ajax({
        url : url,
        success : function(res){
            LOG_INFO( "DATA RECEIVED..." );
            let PAGE = $(res);
            LOG_INFO( $(PAGE).find("div.head:first").text() );
        }
    });
}

function LOG_INFO( MSG ){
    $("body").text( MSG );
    console.info( MSG );
}

$(document).ready(function(){
    action();
});

Вот HTMLcontent, полученный во время Вызов AJAX

Cannot Paste the whole content in here

Вы можете просмотреть содержимое по этой ссылке, если она поддерживается.

источник просмотра: https: //djjohal.video/video/671/index.html#gsc.tab=0

вот результат выполнения кода.

REQUEST SENT...
DATA RECEIVED...
Select Format :

Где текст «Выберите формат:» - это содержимое второго div с классом глава.

Вы можете ясно видеть, что первый тег div с классом «глава» - это тот, который содержит заголовок песни.

Но почему JQuery этого не видит ??

Почему: первый селектор выбирает второй div.

Что мне делать ?? Пожалуйста помоги!!