Как создать модальные окна для каждой карточки. Информация для карточек подтягивается из БД. Очень прошу подсказать как это сделать наилучшим образом

Код страницы выглядит на данный момент так:

@model IEnumerable<Museum.Models.Exponat>


@{
    ViewData["Title"] = "главная";
}

<style>
    .card:hover{
        box-shadow: -1px 9px 40px -12px #808080;
    }
    .card {
        background-color: ghostwhite;
        border: 2px solid blue;
    }
    .card-body {
        border-top: 1px solid blue;
    }
</style>

<div class="row d-flex justify-content-center flex-wrap">
    @foreach (var item in Model)
    {
        <div class="card" style="width:20em;margin:10px">
            <img src="@item.Path" class="card-img-top" alt="Alternate Text" />
            <div class="card-body h-250 ">
                <div class="card-title">
                    <h2>@item.Name</h2>
                </div>
                <div class="card-text">
                    <p>@item.ShortDescription</p>
                </div>
                <button class="btn btn-primary" onclick="openForm()">Узнать больше</button>
            </div>
        </div>
    }

</div>
  


<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
    $('.card').hover(
        function () {
            $(this).animate({
                marginTop: "-=1%",
                marginBottom: "+=1%"
            }, 200)
        },
        function () {
            $(this).animate({
                marginTop: "+=1%",
                marginBottom: "-=1%"
            })
        }
    )
</script>