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 id="share-icon-<?php the_ID(); ?>" class="share-icon">
            <i class="fa fa-share-alt" aria-hidden="true"></i>

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.

  • IF you have having issues with the ID attribute, why dont you try to use the data-attribute. That can help you a lot and you would not have to split anything as well
    – bagpipper
    Commented Jul 15, 2016 at 11:03

1 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 )


   $('.share-icon').on('click',function (e) {
       var id = $(this).attr("id").split('-'); 


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.