Adding tab dynamically

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<a href="#" id="button" class="k-button">Click to Add Tab</a>

<div id="tabstrip">
    <ul id='panelbar'>
        <li id='patDet' class='k-state-active'>
            <span class='k-link k-state-selected'>
                <input type='checkbox' id='cPatientDetails'/>
                <label for='cPatientDetails'>
                    <a href='#' id='cbSelect'></a>
                    Patient Detail</label>
            </span>
            <div id='patTab'>Tab Content</div>
        </li>
    </ul>
</div>

CSS

.myclass {
    border: 3px solid red !important;
}

JavaScript

$("#panelbar").kendoPanelBar({});
$("#button").on("click", function () {
    var liID = "toto";
    var liTitle = "Title";
    var x = "Ummm";
    var panelbar = $("#panelbar").data("kendoPanelBar");
    panelbar.append([
        {
            text   : "<label for='c" + x + "'>" + "<a href='#'   id='cbSelect''></a>" + "" + liTitle + "" + "</label>",
            encoded: false,
            content: "<div>text</div>"
        }
    ]);
});


// #################################  The GRID
document.getElementById('patTab').innerHTML = "<div id='gridPat'></div>";
//		Patient Detail DataSource
var people = [{
    colType: "Name",
    colValue: "<input type='text' id='cName' class='txtBoxUneven' placeholder='John' name='Name' required />"
}, {
    colType: "Middle Name",
    colValue: "<input type='text' id='cMName' class='txtBoxEven' placeholder='Charles' name='mName' required />"
}, {
    colType: "Last Name",
    colValue: "<input type='text' id='cLastName' class='txtBoxUneven' placeholder='Black' name='lname' required />"
}, {
    colType: "Patient Number",
    colValue: "<input type='text' id='cSocialNo' class='txtBoxEven' placeholder='3011' name='sSocialNo' required />"
}, {
    colType: "Date of Birth",
    colValue: "<input type='text' id='cBday' class='txtBoxUneven' placeholder='04/04/1973' name='bday' required />"
}, {
    colType: "Gender",
    colValue: "<select id='ddGender'><option>Male</option><option>Female</option></select>"
}, {
    colType: "Address",
    colValue: "<input type='text' id='cAddress' class='txtBoxUneven' placeholder='350 Fifth Avenue' name='address' required />"
}, {
    colType: "",
    colValue: "<input type='text' id='cAddress' class='txtBoxEven' placeholder='34th Avenue' name='address' required />"
}, {
    colType: "City",
    colValue: "<input type='text' id='cCity' class='txtBoxUneven' placeholder='Brooklyn' name='city' required />"
}, {
    colType: "State",
    colValue: "<select...