Модельное окно по нажатию на товар с информацией

Кнопка с разными ID

<? if($arItem["ATTR_POPUP_MORE"]): ?>
   <div id="modal_<?=$arItem["ID"]?>" data-id="modal_<?=$arItem["ID"]?>" class="btn-default white">Подробнее</div>
<? endif; ?>

Модальное окно с информацией

<? foreach($arItemElems["ITEM"] as $arItem): ?>
        <section class="modal_more" data-id="modal_<?=$arItem["ID"]?>">
           <span class="close_modal"></span>
             <? if($arItem['ATTR_POPUP_MORE']["VALUE"]): ?>
               <div class="modal_more__info">
                  <div class="modal_title"> </div>
                <? if($arItem['ATTR_POPUP_MORE']["VALUE"]["TYPE"] == 'text'): ?>
                    <p><?=$arItem['ATTR_POPUP_MORE']["VALUE"]["TEXT"];?></p>
                <? else: ?>
                    <?=htmlspecialcharsBack($arItem['ATTR_POPUP_MORE']["VALUE"]["TEXT"]);?>
                <? endif; ?>
               </div>
             <? endif; ?>
        </section>
	<? endforeach; ?>

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

const btnModal = document.querySelectorAll(".btn-default.white");

        for (let i = 0; i < btnModal.length; i++) {
            btnModal[i].addEventListener("click", function () {
                // Получаем значение data-id у кнопки
                let dataId = this.getAttribute("data-id");
                // Находим элемент с соответствующим data-id и добавляем ему стиль
                let modalElement = document.querySelector(".modal_more[data-id='" + dataId + "']");
                if (modalElement) {
                    modalElement.style.display = "flex";
                }
            });
        }
        // Добавляем слушатель событий для элементов с классом close_modal
        const closeModals = document.querySelectorAll(".close_modal");
        for (let i = 0; i < closeModals.length; i++) {
            closeModals[i].addEventListener("click", function () {
                // Получаем родительский элемент (модальное окно)
                let modal = this.closest(".modal_more");
                if (modal) {
                    modal.style.display = "none";
                }
            });
        }