How can I add the Post ID to Class Name in Jquery?

Question

In the custom Wordpress theme archive page, I will have Sharing icons for all the posts. Below is the HTML for showing Sharing icon:

<span id="post-share-<?php the_ID(); ?>" class="post-share">
            // show sharing icons here
        </span>
        <span id="share-icon-<?php the_ID(); ?>" class="share-icon">
            <i class="fa fa-share-alt" aria-hidden="true"></i>
        </span>

Once the sharing icon is clicked in #share-icon, sharing icons will be shown from #post-share. The challenge is sharing icon is clicked anywhere, the first post is showing the icons.

So, I have added <?php the_ID(); ?> to have unique classes. Now all the sharing icons has unique post ID's; however in jQuery I am not able to get this unique ID's. Below is the jQuery to correct for this function to work:

$(document).ready(function () {
$("#post-share" + (postID here)).hide();
$('#share-icon' + postID here).click(function () {
    $('#post-share' + postID here).show();
});
});

Help required is to add the post ID's to the class names in jQuery.

Answer 1

You are using css to display none we don't need to use show() function.

Please click on javascript icon in fiddle and select any jquery1.9.1 or above version . Update this code and run ( http://screenshotlink.ru/8f491216a33e437f762eb8815efec77d.png )

$(document).ready(function(){

   $('.share-icon').on('click',function (e) {
       var id = $(this).attr("id").split('-'); 
      $('.post-share#post-share-'+id[2]).css("display","block");
   });

});