WordPress call post-ID in Jquery

I explain the situation I’m having here:

On my home page, I have a list of post being display.

I’ve code for like a modal box to share this post. Basicly, on each post you have a button share. On click, a box display with the sharing link to FB, twitter,etc. Exactly like this: https://www.joe.ie/ ( includigng the Fadein background appearing).

THe problem is, It doesnt display the good post sharing… but all of them.

To solve that I’ve add a post_ID class. However it’s not changing anything – I suppose i needto add it in my jquery – but how to ? below is my jquery

<script type="text/javascript">
$(document).ready(function() {

    $('a.share2').click(function() {
 $(.icons2').fadeIn('500');
   $('.bg2').fadeIn('500');
  $('a.share-close').fadeIn('500');
  $('#nav-wrapper').css('z-index','-1');

    });

 });

and my Loop where I call the post_id as a class:

<div id="top-story-left">
						<?php if(get_option('mvp_featured_left') == 'Select a category:') { ?>
						<?php } else { ?>
							<span class="top-header-contain"><h3><?php echo get_option('mvp_featured_left'); ?></h3></span>
							<ul class="top-stories">
								<?php if (!empty($do_not_duplicate)) { $current_category = get_option('mvp_featured_left');
								 $category_id = get_cat_ID($current_category); $recent = new WP_Query(array( 'cat' => $category_id, 'post__not_in' => $do_not_duplicate,
								  'posts_per_page' => '2'  )); while($recent->have_posts()) : $recent->the_post(); $do_not_duplicate[] = $post->ID; if (isset($do_not_duplicate)) {  ?>

								<li class="post-<?php the_ID(); ?>">
									<a href="<?php the_permalink(); ?>" rel="bookmark">
									<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
										<div class="top-story-image">
											<?php the_post_thumbnail('small-thumb'); ?>
											<?php if(get_post_meta($post->ID, "mvp_video_embed", true)): ?>
												<div class="video-button">
													<img src="<?php echo get_template_directory_uri(); ?>/images/video-but.png" alt="<?php the_title(); ?>" />
												</div><!--video-button-->
											<?php endif; ?>
										</div><!--top-story-image-->
									<?php } ?>											<span class="time2" style="  font-size: 12px;
  padding-bottom: 20px;
  position: relative;
  bottom: 6px;
  color: #2E5894;font-family: 'Open Sans Condensed', serif !important;display:block;width:50px;margin:0 auto;padding-bottom:0px
}"><?php echo time_ago(); ?></span>

									<h2><?php the_title(); ?></h2>
									</a>
										<div class="sm-middle">
						<span class="social-middle" style="top:-5px;position:relative">

							<div class="share-trigger" style="margin-bottom:50px">
							<a class="share2" href="javascript:void(0)"><img width="25" height="25" style="float:left" src="https://mysite.co.uk/wp-content/uploads/2015/06/share.png">
								<p style="top:5px;position:relative"> SHARE</p></a></div>

							<div class="bg2" style="display:none">

							<div style="display:none" class="icons2">
<span class="header-share-box"><p style="padding:10px;text-transform:uppercase">share this article<a class="share-close"
	style="color:white;text-decoration:none;position:relative;display:none;z-index:999;float:right;top:-8px"  href="javascript:void(0)">
		 	<img width="30" height="30"  src="https://mysite.co.uk/wp-content/uploads/2015/06/close.png" /> </a></p>
	</span><br/>

<p style="color:black;font-weight:bold">Share the following article: "<?php the_title(); ?>" </p>

								<a style="width: 22px;
  left: 0px;
  position: relative;top:10px"  href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>&text=<?php the_title(); ?>">
	<img width="50" heigh="50" src="https://mysite.co.uk/wp-content/uploads/2015/06/fb1.png" alt="Facebook" /></a>

<a style="  width: 22px;
  left: 10px;
  position: relative;top:10px" href="#" onclick="window.open('https://twitter.com/share?text=<?php the_title(); ?> -&url=<?php the_permalink() ?>', 'twitterShare', 'width=626,height=436'); return false;" title="Tweet This Post">
	<img width="50" heigh="50" src="https://mysite.co.uk/wp-content/uploads/2015/06/twitter.png" alt="Twitter" /></a>

							<a style="width: 22px;
  left: 20px;
  position: relative;top:10px"  href="mailto:[email protected]?subject=I woud like to share with you this article from X: <?php the_title(); ?>&body=I saw this article on X, and thought it may interrest you from X: <?php the_permalink() ?> ">
	<img width="50" heigh="50" src="https://mysite.co.uk/wp-content/uploads/2015/06/mail.png" alt="Mail" /></a>

</span></div></div>
</div>
								</li>
								<?php } endwhile; } ?>
							</ul>
						<?php } ?>
					</div><!--top-story-left-->