Showing index() of div class

I have a bunch of .post divs that receieve the class of .displayOnly when a user wants to only look at stories with that tag. What I want to do is display a message for each post with the class of ".displayOnly" that I'm showing which displays the index number + 1 within a message. The idea is that the message will say something to the affect of "Displaying 1 of 3," "Displaying 2 of 3" and so on. I've tried using the index() function for this but I keep getting the same result for each message which is "Displaying 1 of 3."

I've included my code below. Can someone tell me where I'm going wrong here?

$('h4').click(function () {
    var numItems = $('.displayOnly').length;
    var currentItem = $('.displayOnly').index() + 1;

    if ($('.displayOnly').length > 0) {
        $("p.itemCount").css('cssText', 'display:block;');
        $("p.itemCount").append("Displaying " + currentItem + " of " + numItems + ".");
        currentItem();
    } else {
        $("p.itemCount").css('cssText', 'display:none;');
        $("p.itemCount").empty();
    }
});