Hey guys I have a “add to favourites” button which, when clicked on, adds a post to a list that a user can view on the page /my-enquiry-list/.

I have managed to create a widget that displays the number of favourites in the users list:

if ($favorite_post_ids):
    $c = 0;
    $i = 0;
    $favorite_post_ids = array_reverse($favorite_post_ids);
    foreach ($favorite_post_ids as $post_id) {
        if ($c++ == $limit) break;
        $i = $i+1;
    }
endif;
echo "<div id='favourite-list'><a class='submit-small-button button' title='Favourites List' href='/my-favourites-list/'><i>" . $i . "</i> My Favourites List </a></div>";

The problem I’m having is that the user has to refresh the page in order to see the number (of favourited posts) appear on the page (using the widget above).

What I really want to achieve is when the user clicks on the “add to favourites” button, the counter in the widget above will increment without any refreshing.

Here is the code for the add to favourites button:

function wpfp_link_html($post_id, $opt, $action) {
    $link = "<a class='wpfp-link' href='?wpfpaction=".$action."&amp;postid=". esc_attr($post_id) . "' title='". $opt ."' rel='nofollow'>". $opt ."</a>";
    $link = apply_filters( 'wpfp_link_html', $link );
    return $link;
}

I’m completely new to all of this so please forgive me if this is an unreasonable question.

Thank you in advance I hope you can help me!