Определение в JS высоты блока и сдвиг вниз на эту высоту

Всем привет.

Прошу подсказки.

У меня на странице есть три блока, которые необходимо скрыть при помощи margin-bottom на высоту блока и при наведении мыши чтоб они появлялись. Высота этих блоков может изменяться в зависимости от содержимого. Чтобы узнать высоту блока и скрыть его на это величину, написал небольшой код в js.

$(document).ready(function () {
        const mainBoxNews = document.querySelector('.main-box-news');
        if (mainBoxNews) {
                let num = 0;
                let mbnHeight = [];
                let square = [];
                let numBox;

                for (num; num < 3; num++) {
                        numBox = num + 1;
                        // Узнаём высоту блока
                        mbnHeight[num] = document.querySelector('.ms-box-' + numBox + ' .mbn__shor').offsetHeight;
                        // Смещаем  его вниз на эту величину
                        square[num] = document.querySelector('.ms-box-' + numBox + ' .mbn__shor');
                        square[num].style.marginBottom = '-' + mbnHeight[num] + 'px';
                }

                $('.ms-box-1 a').hover(
                        function () {
                                square[0].style.marginBottom = '0';
                        }, function () {
                                square[0].style.marginBottom = '-' + mbnHeight[0] + 'px';
                        }
                );
                $('.ms-box-2 a').hover(
                        function () {
                                square[1].style.marginBottom = '0';
                        }, function () {
                                square[1].style.marginBottom = '-' + mbnHeight[1] + 'px';
                        }
                );
                $('.ms-box-3 a').hover(
                        function () {
                                square[2].style.marginBottom = '0';
                        }, function () {
                                square[2].style.marginBottom = '-' + mbnHeight[2] + 'px';
                        }
                );
        }
});

Данный код всё работает, но при попытке добавить в цикл for функцию, которая меняет значение margin-bottom при наведении, в консоли появляются ошибки и данный код перестает работать.

Напри мер вот так сделать не получается

$(document).ready(function () {
        const mainBoxNews = document.querySelector('.main-box-news');
        if (mainBoxNews) {
                let num = 0;
                let mbnHeight = [];
                let square = [];
                let numBox;

                for (num; num < 3; num++) {
                        numBox = num + 1;
                        // Узнаём высоту блока
                        mbnHeight[num] = document.querySelector('.ms-box-' + numBox + ' .mbn__shor').offsetHeight;
                        // Смещаем  его вниз на эту величину
                        square[num] = document.querySelector('.ms-box-' + numBox + ' .mbn__shor');
                        square[num].style.marginBottom = '-' + mbnHeight[num] + 'px';

                        $('.ms-box-' + numBox + ' a').hover(
                                function () {
                                        square[num].style.marginBottom = '0';
                                }, function () {
                                        square[num].style.marginBottom = '-' + mbnHeight[num] + 'px';
                                }
                        );
                }

        }
});

В дальнейшем количество блоков возможно увеличится, и для каждого прописывать функцию, которая будет его показывать при наведении, не очень хочется.

Может кто подсказать, почему не получается добавить в цикл?

Заранее всем признателен за подсказку.