JQuery .show() работает, но .hide() не работает

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

$('#ratingDropdownContainer').on('click', function() {
    if ($('#dropdownListContainer').css('display') == 'none') {
        $('#dropdownListContainer').show();
    }
})

и нет никаких проблем. Но когда пользователь выбирает один из вариантов, .hide() не будет работать. Встроенный стиль

style = "display: block;"

не меняется, когда я это делаю $('#dropdownListContainer').hide();

Я пробовал много вещей, таких как: убедиться, что он заключен в $(document).ready(function(), проверить, распознает ли js, что его отображение является блоковым (что соответствует console.info("okokoko");, как показано в моем коде ниже), я проверяю, что мой jquery загружается до моего js вместо этого я попробовал использовать vanilla js, но ни один из них не сработал, и я не понимаю, почему .show() будет работать, а .hide() — нет. Любая помощь будет оценена по достоинству.

Спасибо.

js:

$('#ratingDropdownContainer').on('click', function() {
    if ($('.dropdown-list-container').css('display') == 'none') {
        $('.dropdown-list-container').show();
    }
})

$('.avg-rating-select').on('click', function() {
    var selectedRatingImg = $(this).find('img').prop('outerHTML');
    var selectedRatingText = $(this).find('p').prop('outerHTML');

    var newDiv = $("<div>" + selectedRatingImg + selectedRatingText + "</div>");
    newDiv.addClass("rating-selected-container");

    if ($('.rating-selected-container').length) {
        $('.rating-selected-container').replaceWith(newDiv);
    } else {
        $('.rating-dropdown-inner-text p').replaceWith(newDiv);
    }
    if ($('.dropdown-list-container').css('display') === 'block') {
        console.info("okokoko");
        $('.dropdown-list-container').hide();
    }
})

HTML:

<div class = "col">
                          <div class = "rating-dropdown-container" id = "ratingDropdownContainer">
                            <div class = "rating-dropdown-inner-text">
                              <p>Average Rating...</p>
                              <i class = "bi bi-caret-down-fill"></i>
                            </div>
                          <div class = "dropdown-list-container" id = "dropdownListContainer">
                            <ul class = "rating-dropdown">
                              <li class = "avg-rating-select">
                                <img src = "/media/main/5stars.png" alt = "5stars" class = "avg-rating-select-img">
                                <p class = "avg-rating-select-text">5 Stars & Up</p>
                              </li>
                              <li class = "avg-rating-select">
                                <img src = "/media/main/4stars.png" alt = "4stars" class = "avg-rating-select-img">
                                <p class = "avg-rating-select-text">4 Stars & Up</p>
                              </li>
                              <li class = "avg-rating-select">
                                <img src = "/media/main/3stars.png" alt = "3stars" class = "avg-rating-select-img">
                                <p class = "avg-rating-select-text">3 Stars & Up</p>
                              </li>
                              <li class = "avg-rating-select">
                                <img src = "/media/main/2stars.png" alt = "2stars" class = "avg-rating-select-img">
                                <p class = "avg-rating-select-text">2 Stars & Up</p>
                              </li>
                              <li class = "avg-rating-select">
                                <img src = "/media/main/1stars.png" alt = "1stars" class = "avg-rating-select-img">
                                <p class = "avg-rating-select-text">1 Star & Up</p>
                              </li>
                            </ul>
                          </div>
                        </div>
                    </div>

CSS:

.rating-dropdown-container {
  display: block;
  position: relative;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .375rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.dropdown-list-container {
    display: none;
    position: absolute;
    z-index: 100;
    border: 1px solid #ced4da;
    border-top:none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
    width: 100%;
    margin-left:-12px;
    background-color: #fff;
}


.avg-rating-select {
    padding-left: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

(Примечание: это проект Django, который использует загрузочную загрузку, если это помогает)