JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css">
<div id="foo" data-role="view">
    <h1>Badge</h1>
    <a id="button" data-role="button" data-badge="1">Foo</a><br />
    <a data-role="button" onclick="utils.setcounter(0);">Set count to 0</a><br />
    <a data-role="button" onclick="utils.setcounter(5);">Set count to 5</a><br />
    <a data-role="button" onclick="utils.setcounter(10);">Set count to 10</a><br />
    <br />
    <a data-role="button" onclick="utils.setcounterEnhanced(0);">Set count to 0 Enhanced</a>
</div>

JavaScript

var app = new kendo.mobile.Application();

utils = {
    setcounter: function(num){
        $('#button').kendoMobileButton({badge: num});
    },
    
    setcounterEnhanced: function(num){
        if (num == 0)
        alert('yes')
            $("#button").data("kendoMobileButton").badge(false)
        else
            $('#button').kendoMobileButton({badge: num});
    }
}