Как реализовать множество модальных окон на странице?
js вам в помощь :)
создаете одно модальное окно как шаблон , а потом подтягиваете данные с помощью js
Используйте шаблон вот пример
В html должен быть только этот шаблон<template id="tmpl-popup-student">
    <div class="popup" id="popup_student" aria-hidden="true" tabindex="-1">
        <button class="popup__close j-popup-close" aria-label="Закрыть"></button>

        {{#if title}}
        <header class="popup__header popup__header_simple">
            {{title}}
        </header>
        {{/if}}

        <div class="student">
            {{#if student.name}}
            <div class="student__name">
                {{student.name}}
            </div>
            {{/if}}

            {{#if student.rate}}
            <div class="student__rate">
                {{student.rate}}
            </div>
            {{/if}}
        </div>
    </div>
</template>
далее при клике на модалку делаете запрос на сервер получаете данные студента и показываете модалку с полученными данными
для шаблонов использую template7
моя функция рендера((d) => {
  window.template = (id, data, precompile) => {
    if (typeof precompile === 'undefined') {
      precompile = false;
    }

    if (d.getElementById(id) !== null) {
      const pattern = d.getElementById(id).innerHTML;

      if (precompile) {
        if (!window.precompiledT7) {
          window.precompiledT7 = Template7.compile(pattern);
        }

        return window.precompiledT7(data || {});
      }

      return Template7.compile(pattern)(data || {});
    }

    return '';
  };
})(document);
вызывается такvar data = {
  title: 'О студенте',
  student: {
    name: 'Иванов Иван',
    rate: '4.5'
  }
}

template('tmpl-popup-student', data)