[Don_Conteo]

Прошу помощи знатоков. Есть несколько div с одинаковыми кнопками (значения для полей в дивах берутся из базы с помощью ТЛ) и модальное окно (одно для всех кнопок). Необходимо при нажатии на любую из этих кнопок открыть модальное окно и его в скрытый input (calor) добавить значение (количество ккал elem.calories) именно из того div, в котором была нажата кнопка.

кусок HTML (здесь привел три блока для примера, на самом деле их, конечно же, в разы больше):

<div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/peanut.jpg}">
                        <p th:each="elem : ${food[0]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[0]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" id="0" value="+" class="add">
                    </div>

                    <div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/brasilNut.jpg}">
                        <p th:each="elem : ${food[1]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[1]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" value="+" class="add">
                    </div>

                    <div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/mindal.jpg}">
                        <p th:each="elem : ${food[2]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[2]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" value="+" class="add">
                    </div>

модальное окно

<div class="overlay" id="modal-background">
        <div class="flex-popup" id = flex>
            <div class="popup" id="popup">
                <input type="hidden" name="calor" id="calor">
                <input class="input" placeholder="Введите количество в граммах" id="quantity" type="text" width="50px" background-color="white">
                <button id="addToRes" class="addBtn" title="Добавить">Добавить</button>
                <button id="butClose" class="closeBtn" title="Отмена">Закрыть</button>
            </div>
        </div>
    </div>

JS

<script>
        $(function() {
            $(".add").click(function () {
                document.getElementById("modal-background").style.display = "block";
                });

            $("#butClose").click(function () {
                document.getElementById("modal-background").style.display = "none";
                });

            $(document).mouseup(function (e){
                var modalctr = $("#modal-background");
                var modal = $(".popup");
                if (!modal.is(e.target) && modal.has(e.target).length === 0){
                modalctr.hide();
                }
            });
        });

        let nuts = document.getElementById('nutsPage'),
            mushrooms = document.getElementById('mushroomsPage')

        nuts.addEventListener( 'click', function( e ) {
            document.getElementById("foodMushrooms").style.display = "none";
            document.getElementById("foodNuts").style.display = "block";
        });

        mushrooms.addEventListener( 'click', function( e ) {
            document.getElementById("foodNuts").style.display = "none";
            document.getElementById("foodMushrooms").style.display = "block";
        });
    </script>