Несколько modal dialog на одной странице

На странице Header.cshtml есть вызов 3-х модальных окон:

<div id="modal-register" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
        </div>
    </div>
</div>
<div id="modal-requestcall" class="modal fade" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content" id="requestcallcontent"></div>
    </div>
</div>
<div id="modal-requestmail" class="modal fade" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content" id="requestmailcontent"></div>
    </div>
</div>


<header class="fixed-top">
...
  <span class="mt-1" style="display: block; text-align: center;">
    <small>
      <a data-bs-target="#modal-requestcall" data-bs-toggle="modal" role="button"  style="text- 
         decoration:none; color:darkslateblue;">заказать звонок</a>
    </small>
  </span>
...
  <li>
    <a class="dropdown-item" data-bs-target="#modal-register" data-bs-toggle="modal" 
      role="button">Регистрация</a>
  </li>
...
  <a class="nav-link text-dark navbar-brand" asp-area="" data-bs-target="#modal-requestmail" data- 
   bs-toggle="modal" role="button"><i class="fas fa-envelope-open-text"></i>Напишите нам</a>
</header>

В отдельном файлике Scripts.cshtml вызов модальных окон:

<script>
    $(function () {
        $('#modal-register').on('show.bs.modal', function (event) {
            //var button = $(event.relatedTarget); // Button that triggered the modal
            //var url = button.attr("href");
            //var modal = $(this);
            //modal.find('.modal-content').load(url);
            $('#requestcallcontent').load("/Admin/Register");
        });
    });
</script>
<script>
    $(function () {
        $('#modal-requestcall').on('show.bs.modal', function (event) {
            //var button = $(event.relatedTarget); // Button that triggered the modal
            //var url = button.attr("href");
            $('#requestcallcontent').load("/Home/RequestCall");
            //var modal = $(this);
            //modal.find('#requestcallcontent').load(url);
        });
    });
</script>
<script>
    $(function () {
        $('#modal-requestmail').on('show.bs.modal', function (event) {
            //var button = $(event.relatedTarget); // Button that triggered the modal
            //var url = button.attr("href");
            $('#requestmailcontent').load("/Home/RequestMail");
            //var modal = $(this);
            //modal.find('#requestmailcontent').load(url);
        });
    });
</script>

Modal body:

@model Message

<form method="post" asp-controller="Home" asp-action="RequestMail">
    <div class="modal-header">
        <h5 class="modal-title" id="CallOrderModalLabel"><i class="fas fa-envelope-open-text"></i>&nbsp&nbspОтправить сообщение</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <div class="form-horizontal">
            <div class="form-group">
                <label asp-for="Name" class="form-label"></label>
                <input asp-for="Name" class="form-control" type="text" placeholder="Имя" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Phone" class="form-label"></label>
                <input asp-for="Phone" class="form-control" placeholder="Телефон" />
                <span asp-validation-for="Phone" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Email" class="form-label"></label>
                <input asp-for="Email" class="form-control" type="email" placeholder="Почта" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Text">Напишите письмо:</label>
                <textarea asp-for="Text" class="form-control" rows="3" placeholder="Текст письма"></textarea>
                <span asp-validation-for="Text" class="text-danger"></span>
            </div>
        </div>
        <div class="validation" asp-validation-summary="ModelOnly"></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Передумал</button>
        <input type="submit" value="Отправить" class="btn btn-success btn-sm" asp-route-ReturnUrl="@Context.Request.Headers["Referer"].ToString()" />
    </div>
</form>

В итоге работает только один, любой первый при запуске. Первый закрываю, открываю другие, экран темнеет, но модального окна нет. Прошу помощи разобраться.