can't select tabstrip badge and update it

hello there!
i have 3 views "menu", "details" and "cart" which have a header and a footer. The tabstrip only has 2 tabs : "menu" and "cart". 

<div data-role="view" id="menu" data-title="Menu"  data-layout="myLayout" data-model="viewModel">
   here i have a listview with the category names and when i click on an "li" it goes to the #details view where products are filtered by the category name
</div>

<div  id="details" data-role="view" data-title="Details" data-layout="myLayout" data-transition="slide:left" data-model="viewModel" >
    <h3 class="item-title">#: name #</h3>
    <p class="item-info">#: description #</p>
    <a data-role="button" data-item-id="#:id#" class="details-link fa"  data-icon="cart" data-bind="click: addToCart" >#: price # lei</a>
</div>

the footer from myLayout looks like this:

<footer data-role="footer">
<div data-role="tabstrip" id="badgeIcon">
    <a href="#menu" class="fa" data-icon="home">Menu</a>
    <a href="#cart" class="fa" data-icon="cart" >Cart</a>
</div>
</footer>

i have onInit function which works and initializes the badge:

function onInit(e) {
 var tabstrip = e.layout.footer.find(".km-tabstrip").data("kendoMobileTabStrip");
 tabstrip.badge(1,0);
}

And the addToCart function is this
function addToCart(e) {
var tabstrip = $("#badgeIcon").data("kendoMobileTabStrip");
tabstrip.badge(1, +tabstrip.badge(1) + 1);

....rest of function which works perfectly...
}

The app loads in the #menu view from where it goes to #details view,  and then,  when i click on a #li it crashes and gives me an error on the " tabstrip.badge(1, +tabstrip.badge(1) + 1); " line

Uncaught TypeError: Cannot call method 'badge' of undefined 

If i load the app in the #details view ( index.html#details ) with all the items shown, it works and updates the cart badge, but i want to filter them and thats why i have the #menu view first.

I'm using the latest kendo latest release with jQuery1.9.1

Please give me your input and thanks in advance :)