DevExpress: TabPanel: Add a template dynamically in JavaScript

I am trying to dynamically populate a DevExpress tabpanel(dxTabPanel) with custom templates in my javascript code. Correct number of tabs are being added but the tab content is empty. How do I dynamically populate a Tab Panels' template? In sample code below, there are 2 templates, employeeListTemplate and addEditEmployeeTemplate that have some content. They are not being displayed in my webpage.

@(Html.DevExtreme().Button().ID("addTabsButton").OnClick("populateTabPanel").Text("Add Tabs").Type(ButtonType.Default).Width(100))

@(
Html.DevExtreme().TabPanel()
.ID("contentTabPanel")
.Loop(false)
.AnimationEnabled(false)
.SwipeEnabled(false)
.DeferRendering(false)
.RepaintChangesOnly(false)
.ScrollingEnabled(true)
)

@using (Html.DevExtreme().NamedTemplate("employeeListTemplate"))
{    
    @(Html.DevExtreme().DataGrid()
            .Columns(c =>
            {
                c.Add().DataField("FirstName").AllowEditing(true);
                c.Add().DataField("LastName").AllowEditing(true);                
                c.Add().DataField("Address1").AllowEditing(true);
                c.Add().DataField("Address2").AllowEditing(true);
                c.Add().DataField("City").AllowEditing(true);
                c.Add().DataField("State").AllowEditing(true);
                c.Add().DataField("Zip").AllowEditing(true);
                c.Add().DataField("PhoneNumber").AllowEditing(true);
            })
        )
}

@using (Html.DevExtreme().NamedTemplate("addEditEmployeeTemplate"))
{
    <div>This is Admin->Add Edit Employee</div>
}

JavaScript:

var items = [];
function populateTabPanel() {

    let jsonString = '{"ParentID":1,"ParentName":"Administration","ID":1,"Text":"Employee","Icon":null,"Path":null,"Templates":[{"ID":1,"TemplateIndex":0,"TemplateName":"employeeListTemplate","IsVisible":true,"Title":"Current Employees"},{"ID":2,"TemplateIndex":1,"TemplateName":"addEditEmployeeTemplate","IsVisible":true,"Title":"Add/ Update Employee"}]} ';
    let tabPanelInstance = $("#contentTabPanel").dxTabPanel("instance");
    let tabPanelItems = tabPanelInstance.option('items');    
    items.length = 0;    
    var templateObj = JSON.parse(jsonString);    
    var templateArray = templateObj.Templates;    
    for (var i = 0; i < templateArray.length; i++) {
        items.push(
        {
            template: $('[id="${templateArray[i].TemplateName}"]'),
            title: templateArray[i].Title,
            index: templateArray[i].TemplateIndex
        }
        );
    }


    
    let tabPanelInstance = $("#contentTabPanel").dxTabPanel("instance");
    tabPanelInstance.option("items", items);
}

itemsArray.push(
{
    //template: templateArray[i].TemplateName,
    template: document.getElementById(templateArray[i].TemplateName),
    title: templateArray[i].Title,
    index: templateArray[i].TemplateIndex
}

);