Change span's text value when an input radio is clicked using jQuery

I want the text 'Rate! (62)' in the 'rate' class to change to 'Rate! (63)' when a user clicks one of the input radios.

The difficulty is that I have many 'stars' divs so this change must occur only to the next span descendant of the enclosing 'stars' div.

   <div class="stars float-left">
    <div class="rating" style="width:99%"></div>
    <p><input type="radio" name="rating" id="star5" value="5"><label for="star5"></label><input type="radio" name="rating" id="star4" value="4"><label for="star4"></label><input type="radio" name="rating" id="star3" value="3"><label for="star3"></label><input type="radio" name="rating" id="star2" value="2"><label for="star2"></label><input type="radio" name="rating" id="star1" value="1"><label for="star1"></label>
    </p>
    <span class="rate">Rate! (62)</span>
</div>

I'm new to jQuery and this is what I came up with until now but it's not working. i think I have confuse a couple of things on the way:

('.rating input:radio').click(function() {
    var str_rate = $(obj).closest('span').next().find('.rate');
    //TODO: parse the current value and add 1 to it
    $(str_rate).html(str);
}

Is there something I'm completely missing?

UPDATE: This jsfiddle shows the progress until now considering the answers but still it doesn't work properly.