km-tabstrip dynamically create

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
    <p>Profile</p>
    <button onclick="makeTabStrip()">Make TabStrip</button>
</div>

<div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip">
    <p>Sales</p>
</div>

<div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">
    <p>Rating</p>
</div>

<div data-role="layout" data-id="mobile-tabstrip">
    <div id="footer" data-role="footer">

    </div>
</div>

JavaScript

var html = '<div id="myTabStrip"><a href="#tabstrip-profile" data-icon="contacts">Profile</a><a href="#tabstrip-sales" data-icon="history">Sales</a><a href="#tabstrip-rating" data-icon="favorites">Rating</a></div>';

var app = new kendo.mobile.Application(document.body)

function makeTabStrip() {     
    $("#footer").append(html);
    $("#myTabStrip").kendoMobileTabStrip();
    $("#myTabStrip").kendoMobileTabStrip().data("KendoMobileTabStrip").select(1);

}