Bootstrap badge don't always appear in Safari

I have a tool that has 3 tabs and some counters on each tab. The title of the tab is supposed to have a badge that shows a total of all counters on that tab. If the total is 0, it shouldn't show any badge.

This all works fine in Chrome and Firefox, but in Safari (both on OS X and iOS) I get some very strange behavior that I can't seem to debug.

I have a badge with some very simple code:

<li role="presentation">
    <a href="#AB-bulk" aria-controls="AB-bulk" role="tab" data-toggle="tab" class="climb_type_nav">
        Auto-Belay       
        <span class="badge" id="AB-badge"></span>
    </a>
</li>

And some javascript to (re)set the html contents of the badge span:

// reset badge counts
$.each($('.climb_type_nav').find('.badge'), function (i, x) {
    $(x).empty();
});

// get counts per climb type
$.each($('.input-number'), function (i, x) {
    var climbs = parseInt(x.value, 10);
    if (climbs > 0) {
        var shortName = x.getAttribute('climb_type_short_name');

        if (!ct[shortName]) {
            ct[shortName] = 0;
        }
        ct[shortName] += climbs;
    }
});

// set badge counts
$.each(ct, function (shortName, count) {
    $('#' + shortName + '-badge').html('<b>' + count + '</b>');
});

To replicate the behavior in this fiddle http://jsfiddle.net/ajLxsLc2/3/:

Click the plus sign to update the counter, or just manually type in a number and click off of the input -- You'll see the badge appear on the first tab
Click the minus sign to get the count back to 0 -- You'll see the badge disappear
Click the plus sign again to update the counter -- this time the badge will NOT appear in Safari
To get the badge to appear, either click on another tab or hover over the tab you're on

I've confirmed that the HTML value is being set inside the badge's span, it's just not showing up when in Safari for some reason. Any help is much appreciated!

It's a funny issue. I noticed the badge appears on mouse over, so this seems to fix it:

    // set badge counts
    $.each(ct, function (shortName, count) {
        $('#' + shortName + '-badge')
            .html('<b>' + count + '</b>')
            .parent().focus().blur();
    });

Take a look at this updated fiddle