Не выводятся данные из базы данных в ссылку, кроме самой первой

Я пытаюсь вывести запись из базы данных в форму. У меня в форме имеется 3 выпадающих списка. Это дивы со ссылкой и списком. При нажатии на ссылку открывается выпадашка. И вот я в ссылку хочу вывести данные по запросу из бд. В ссылку в первом таком выпадающем списке выводится все хорошо, а вот в последующие ссылки данные уже не выводятся.

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

С SQL запросом все в порядке, уже проверено. Но не могу понять почему возникает такая проблема с последующими ссылками. В чем может быть дело?

    echo ' <label class="label">Select Category</label>';
       echo ' <div class="select">';
       echo '<a href="javascript:void(0);" class="slct">'.$row['categoryName'].'</a>';
       echo '<ul class="drop" >';
                include ('../dbselectoptionsCategory.php');       
        echo '</ul>';
        echo '<input type="hidden" id="select" name = "category">';
        echo '</div>';

       echo ' <label class="label">Select Container</label>';
       echo ' <div class="select">';
//в ссылку ниже данные уже не выводятся
       echo '<a href="javascript:void(0);" class="slct">'.$row['containerName'].'</a>';
//
       echo '<ul class="drop" >';
                include ('../dbselectoptionsContainer.php');       
        echo '</ul>';
        echo '<input type="hidden" id="select" name = "container">';
        echo '</div>';

Стили:

.select {
    margin: 0 10px 15px 0;
}

.slct {
    display: block;
    background: #fff;
    border: 1px solid #E7EAEE;
    border-radius: 4px;
    max-width: 200px;
    padding: 8px 12px;
    color: #64748B;
    
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    
    background-position: 290px -145px;

    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; 

}
.slct.active {
    border-radius: 5px 5px 0 0;
    border-bottom: none;
}

Скрипт для выпадающего списка:

 $('.slct').click(function(){
    /* Заносим выпадающий список в переменную */
    var dropBlock = $(this).parent().find('.drop');

    /* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/
    if( dropBlock.is(':hidden') ) {
        dropBlock.slideDown();

        /* Выделяем ссылку открывающую select */
        $(this).addClass('active');

        /* Работаем с событием клика по элементам выпадающего списка */
        $('.drop').find('li').click(function(){

            /* Заносим в переменную HTML код элемента
            списка по которому кликнули */
            var selectResult = $(this).html();

            /* Находим наш скрытый инпут и передаем в него
            значение из переменной selectResult */
            $(this).parent().parent().find('input').val(selectResult);

            /* Передаем значение переменной selectResult в ссылку которая
            открывает наш выпадающий список и удаляем активность */
            $(this).parent().parent().find('.slct').removeClass('active').html(selectResult);

            /* Скрываем выпадающий блок */
            dropBlock.slideUp();
        });

    /* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */
    } else {
        $(this).removeClass('active');
        dropBlock.slideUp();
    }

    /* Предотвращаем обычное поведение ссылки при клике */
    return false;
});

Ответы (0 шт):