Jquery – Ajax modal not opening after filtering the categories

I have a modal which pops up when post is clicked to show the content inside of it. It all works fine on the frontpage but also on right side I got sidebar with all listed categories that is also working with ajax call to filter out posts based on clicked category.

Now whenever the visitor clicks category on the sidebar content on the frontpage gets updated with the new posts associated with that category which is OK. But if I try to click on the post that modal which works fine to show content on the front-page is not working somehow? What might be the issue here?

button I’m using to fire ajax

 <a href="#" type="button" class="view-post" data-postid="<?php the_ID(); ?>" data-slug="<?php echo get_post_field('post_name', $post_id); ?>"></a>

modal-ajax.js

jQuery(document).ready(function($) {

    $('.view-post').click(function(e) {
        e.preventDefault();

        var postID = $(this).data('postid');
        var postSlug = $(this).data('slug');

        // changing URL based on the post slug
        window.history.pushState(null, null, postSlug);

        $.ajax({
            url: wpAjax.ajaxUrl, // WordPress AJAX endpoint
            type: 'post',
            data: {
                action: 'get_post_content',
                post_id: postID,
            },
            success: function(response) {
                $('#modal-content-placeholder').html(response);
                $('#modal').show();
            }
        });
    });

    $('.homeInner').click(function() {
        $('#modal').hide();
    });

    $(window).click(function(event) {
        if (event.target == $('#modal')[0]) {
            $('#modal').hide();
        }
    });

});

modal-callback.php

<?php 

function get_post_content() {
    $post_id = $_POST['post_id'];
    $post_slug = $_POST['post_slug'];

    $args = array(
        'p' => $post_id,
        'post_type' => 'post',
    );

    $singlePostQuery = new WP_Query($args);

    if ($singlePostQuery->have_posts()) {
        while ($singlePostQuery->have_posts()) {
            $singlePostQuery->the_post();
            // Display the post content here
            the_content();
        }
    } else {
        // No posts found
        echo 'No posts found';
    }


    wp_die();

}
add_action('wp_ajax_get_post_content', 'get_post_content');
add_action('wp_ajax_nopriv_get_post_content', 'get_post_content');

Ajax file and callback function for filtering in sidebar I’m using

filter-ajax.js

(function($){

    $(document).ready(function(){
        $(document).on('click', '.js-filter-item', function(event){
            (event).preventDefault();

            var category = $(this).data('category');
            var categorySlug = $(this).data('slug');

            // changing URL based on the category slug
            window.history.pushState(null, null, categorySlug);

            $.ajax({
                url: wpAjax.ajaxUrl,
                data: { 
                    action: 'filterterm', 
                    category: category, 
                    taxonomy:  $(this).data('taxonomy'),
                    posttype:  $(this).data('posttype')
                    },
                type: 'post',
                success: function(result){
                    $('#response').html(result);
                },
                error: function(result){
                    console.warn(result);
                }
            });
        });
    });
})(jQuery);

ajax-callback.php

<?php
add_action('wp_ajax_nopriv_filterterm', 'filter_ajax_term');
add_action('wp_ajax_filterterm', 'filter_ajax_term');

function filter_ajax_term(){

    $category = $_POST['category'];

    $args = array(
        'post_type' => $_POST['post'], 
        'posts_per_page' => -1, 
        'orderby'   => 'NAME', 
        'order' => 'ASC'
    );

    if ($category !== null && isset($category) && $category !== '' && !empty($category)) {
        $args['tax_query'] = 
            array( 
                array( 
                        'taxonomy' => $_POST['taxonomy'], 
                        'field' => 'id', 
                        'terms' => array((int)$category) 
                    ) 
            ); 
    } else {
        $all_terms = get_terms(array('taxonomy' => 'acquisition', 'fields' => 'slugs'));
        $args['tax_query'][] = [
            'taxonomy' => 'acquisition',
            'field'    => 'slug',
            'terms'    => $all_terms
        ];
    }


    $the_query = new WP_Query( $args ); ?>
    
    <div class="blogPostsWrapper mt-10">
        <div class="grid grid-cols-3 gap-4 mr-5">

            <?php if ( $the_query->have_posts() ) : 
                while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                <?php get_template_part( 'partials/blog', 'card' ); ?>
        
            <?php endwhile; endif; ?>
        </div>
    </div>
<?php

    die();
}

?>

blog-card.php

<div class="blogCardBlackOverlay">
    <div class="col-span-1 shadow-2xl">
    <?php $thumb = get_the_post_thumbnail_url(); ?>
        <div class="relative blogPostCard rounded-2xl" style="background-image: linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.3) 130%), url('<?php echo $thumb;?>')">
            <h1 class="blogPostCard_title font-sans text-white font-bold text-start"><?php the_title(); ?></h1>
            <!-- Gettng custom taxonomies associate with teh post -->
            <?php
                $post_id = get_the_ID();
                $terms = get_the_terms($post_id, 'acquisition');

                if ($terms && !is_wp_error($terms)) {
                    $first_term = reset($terms); ?>
                    <span class="blogCard_taxonomy__item py-1 px-4 text-sm rounded-2xl absolute bottom-4 right-4 font-medium item-<?php echo $first_term->slug; ?>"><?php echo $first_term->name; ?></span>
                <?php
                }
            ?>
            <!-- Reading time -->
            <div class="blogPost_readingTime__wrapper">
                <?php 
                $readingTime = get_field('reading_time');
                ?>
                <div class="blogPost_readingTime text-white text-avenir absolute bottom-4 left-4">
                    <i class="fa-regular fa-lightbulb"></i>
                    <span><?php echo $readingTime; ?></span>
                </div>
            </div>
                <a href="#" type="button" class="view-post" data-postid="<?php the_ID(); ?>" data-slug="<?php echo get_post_field('post_name', $post_id); ?>"></a>
        </div>
    </div>
</div>