Add a row on clicking each post featured image

I have to add a row that (containing the content of post) below the post thumbnail on clicking thumbnail. I have done it by using this but it affects the adjacent post thumbnail.I want that a complete row to be add below every post without affecting other posts. Thumbnail of each post should be remain same.

<?php
$args = array('post_type' => 'team', 'category_name' => $a);
$query = new WP_Query($args);
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        ?>                       
        <div class="tab_heading col-md-4">
            <div class="wrapper">
                <a href="#tab-<?php echo get_the_id(); ?>">
                    <div class="bg_image">
                        <?php the_post_thumbnail(); ?>
                    </div>
                </a>
                <p class="title-post"> 
                    <?php the_title(); ?>
                </p> 

            </div>
        </div>
<div class="tab" style="">
        <div id="tab-<?php echo get_the_ID(); ?>" class="tab-content">
            <div class="row">
                <?php the_content(); ?>
            </div>
        </div>
</div>
        <?php
    }
}
wp_reset_query();
?>

Here is picture showing my desired design.
enter image description here

i want that when i click sofia i add a row containing the_contentof specific post.
sory for my english
.

Solutions Collecting From Web of "Add a row on clicking each post featured image"

If you go with @Rituparna’s solution, try this:

Don’t forget to add <a href="#" class="close">X</a> in your container.

jQuery(function($){
    $(".plink").on('click', function( event ){

        event.preventDefault();

        // cache the link clicked on
        var link = $(event.target);

        // use the link attr to target the desc
        var containerID = link.attr('href');

        // get the description contained in the link
        var desc = link.find('.member-desc');

        // send the member content to the container
        $(containerID +' #desc_holder').html(desc);

    });

    // functionality for the close button
    $('.close').on('click', function( event ) {

        event.preventDefault();

        $('#desc_holder').html('');
    }
});
<div class="row">
<?php
$args = array('post_type' => 'team', 'category_name' => $a);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
?>                       
<div class="tab_heading col-md-4">
<div class="wrapper">
<a class="plink" href="#tab-<?php echo get_the_id(); ?>">
<div class="bg_image">
<?php the_post_thumbnail(); ?>
</div>
<div class="member-desc" style="display:none;">
<?php the_content(); ?>
</div>
</a>
<p class="title-post"> 
<?php the_title(); ?>
</p>
</div>
</div>
<?php
}
}
wp_reset_query();
?>
</div>
<div class="tab" style="">
<div id="tab-<?php echo get_the_ID(); ?>" class="tab-content">
<div class="row">
<div class="col-md-12" id="desc_holder">
<!-- default contents -->
</div>
</div>
</div>
</div>

I don’t think with your html structure the desired result can be possible!! I have made some changes to the structure. Now you can easily copy contents from .member-desc (display none) when click on the thumbnail and add to the #desc_holder div.

<script type="text/javascript">
jQuery(function($){
$(".plink").on('click', function(){
var txt = $(this + " .member-desc").html();
$("#desc_holder").empty().html(txt);
});
});
</script>

I am not sure about the jquery code but hope this will give you an idea about I am doing.