Почему не открывается модальное окно?

Сделал модальное окно с помощью jquery. Весь html код располагается на jsp странице, также использую spring-boot, tomcat.

<button class="button js-button-campaign">Click</button>//кнопка при нажатии на которую должно всплыть окно
<div class="overlay js-overlay-campaign">//Подложка для окна
   <div class="popup js-popup-campaign" >//само окно
        //Здесь просто форма для отправки на рест сервер.        
        <div class="close-popup js-close-campaign"></div>//чтобы можно было закрыть окно
   </div>
</div>

Вот код jquery, который лежит в отдельно файле, файл подключаю к jsp странице. Хотя я размещал его и просто в head-теге, ничего не менялось.

// открыть по кнопке
$('.js-button-campaign').click(function() { 
    $('.js-overlay-campaign').fadeIn();
    $('.js-overlay-campaign').addClass('disabled');
});
// закрыть на крестик
$('.js-close-campaign').click(function() { 
    $('.js-overlay-campaign').fadeOut();
});

Когда нажимаю на кнопку - ничего не проиходит.Проверил код просто в обычном html документе, куда подключил все необходимые ресурсы - все работает. Что не так может быть с jsp или spring-boot'ом? В чем может быть дело?

Дополнение:
У меня есть jsp страница, которая отображает таблицу, данные таблицы приходят из бд, их присылает RestController в виде json я его парсю и отображаю в виде таблицы. Я хочу использовать подход ajax, и использую, т.о:

       <script>
            var LIST_PRODUCTS = "/listProducts";
            $(document).ready(function() {
                var table = $('table');
                $.ajax({
                    type: "GET",
                    url: LIST_PRODUCTS,
                    dataType: "json",
                    async: true,
                    success: function (result) {
                        for(var i in result) {
                            var str = "<tr>";
                            for(var prop in result[i]){
                                str += "<td>" + result[i][prop] + "</td>";
                            }
                            str += "</tr>";
                            table.append(str);
                        }
                    },
                    error: function () {
                        alert("Exception");
                    }
                });
            });
        </script> 

Из этого вырисовывается нужная мне таблица, код, который отвечает за вызов всплывающей формы, был просто в теге head в <script></script> и не работало. Когда перенес код оттуда, и вставил его сразу после загрузки таблицы все начало работать. А если я хочу не хочу это все скидывать в одну кучу, в один script, а хочу раскидать по файлам, нужно везде писать код jquery в $(document).ready(function(){}) или как? Если я написал что-то глупое, то сорри, буквально сегодня начал пользовать js и jq.
Вот так у меня выглядит сейчас секция head, если перенесу методы открытия/закрытия попап окна в script где находится $(document).ready(function(){}), то начинает все работать:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="/WEB-INF/resources/js/popupWindow.js"></script>
        <script>
            var LIST_PRODUCTS = "/listProducts";
            $(document).ready(function() {
                var table = $('table');
                $.ajax({
                    type: "GET",
                    url: LIST_PRODUCTS,
                    dataType: "json",
                    async: true,
                    success: function (result) {
                        for(var i in result) {
                            var str = "<tr>";
                            for(var prop in result[i]){
                                str += "<td>" + result[i][prop] + "</td>";
                            }
                            str += "</tr>";
                            table.append(str);
                        }
                    },
                    error: function () {
                        alert("Exception");
                    }
                });
            });
        </script>
        <script>
            $('#create_date').mask('11/11/1111');
        </script>
        <script>
            //МЕТОДЫ ОТКРЫТИЯ/ЗАКРЫТИЯ
            $('.js-button-campaign').click(function() {
                $('.js-overlay-campaign').fadeIn();
                $('.js-overlay-campaign').addClass('disabled');
            });
            // закрыть на крестик
            $('.js-close-campaign').click(function() {
                $('.js-overlay-campaign').fadeOut();
            });
        </script>