WordPress call post-ID in jquery

This question is more of a js/jQuery is then WordPress. I am not going to post a working answer as It is hard to read the html given. And I think how you are doing it is not a effective solution. My answer should guide you towards better solution.

First of all you do not need to fade in all element inside the popup. Only fade in the parent and hide the parent element.

If popup html parent is like this:

<div class="popup" style="display:none">
    <!-- all child element here-->
</div>

Js for this should be like

$('.popup').fadeIn(500);

For me I would only output the popup html once in the footer. Then dynamically update the popup html when clicked on a particular post element.

For example

<div id="popup" style="display:none">
    <a class="facebook" href="#">Share in facebook</a>
    <a class="twitter" href="#">Share in Twitter</a>
</div>

The link I will put inside the loop to popup initiate when clicked

<a class="share_link" href="#" data-permalink="https://wordpress.stackexchange.com/questions/191993/<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>">Click to Share</a>

Example js code to update popup when clicked in the share_link anchor element

$('.share_link').click(function(){
    var $this = $(this);

    // gather data
    var permalink = $this.data('permalink');
    var id = $this.data('id');
    var title = $this.data('title');

    // update popup
    $popup = $('#popup');
    $popup.find('.facebook').attr('href', facebook_share_link(permalink, title));
    $popup.find('.twitter').attr('href', twitter_share_link(permalink, title));

   // show the popup
   $popup.fadeIn(500);
});

var facebook_share_link = function(permalink, title){
    // generate the appropriate link to facebook
}

var twitter_share_link = function(permalink, title){
    // generate the appropriate link to twitter
}

Hope this helps.