Как открывать несколько модальных окон на странице?

Question

[Артем]

На странице есть несколько модальных окон, каждому присваивается data-id соответствующий карточке, при клике на которую оно должно открываться. Не очень понимаю что нужно добавить в скрипт что бы это происходило корректно, сейчас же открывается окно только для первой карточки из трех находящихся на странице

Скрипт:

jQuery(function($) {
    $('body').on('click', '.view-post' function() {
        var data = {
            'action': 'load_post_by_ajax',
            'id': $(this).data('id'),
            'security': blog.security
        };

        $.post(blog.ajaxurl, data, function(response) {
            response = JSON.parse(response);
            $('#cardModal .modal-body #cardModalLabel').text(response.title);

            var cardModal = new bootstrap.Modal(document.getElementById('cardModal'));
            cardtModal.show();
        });
    });

Модальное окно:

<div data-id="<?php the_ID(); ?> class="modal" id="cardModal" >
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="title" >Заголовок</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body"><?php the_content(); ?></div>
        </div>
    </div>
</div>

Карточка при клике на которую должно открываться модальное окно:

<div class="grid_col" >
	<div data-id="<?php the_ID(); ?>" class="single_grid view-post">
		<div class="card-thumb"><?php the_post_thumbnail('full'); ?></div>
			<div class="card-content">
				<h2 class="card__title"><?php the_title(); ?></h2></a>
				<div class="card-excerpt"><?php the_excerpt(); ?></div>
			</div>
		</div>
	</div>
</div>