title: Dynamically Adding HTML files as tabs to Kendo TabStrip
body: <p>I'm trying to make a web-part which is basically a Kendo tabstrip . it has a simple ul on it's own and linking external html files to each relative li using a javascript code. it works fine so far.
  but now I want to be able to call functions to add or remove whatever file I selected to my tabstrip and so far it's not working .</p>
  
  <p>I've searched and found some functions to the job but this one is closer to what I had in mind . 
  when I use the add button the tabstrip is made but the contecturl link doesn't work and it's just an empty tab.</p>
  
  <pre><code>&lt;------------------------ web-part ------------------------&gt;
  &lt;div class="row"&gt;
          &lt;input type='text' id='tabname' name='tabname'&gt;
          &lt;input type='text' id='tabLink' name='tabLink'&gt;
          &lt;input type="button" value="Add Tab" onclick="AddTab()" /&gt;
          &lt;input type="button" value="Remove Tab" onclick="closeTab()" /&gt;
       &lt;/div&gt;   
  &lt;div id="tabstrip"&gt;
                  &lt;ul id="tabStripUL"&gt;
                      &lt;li class="k-state-active"&gt;tab1&lt;/li&gt;
                      &lt;li&gt;tab2&lt;/li&gt;
                      &lt;li&gt;tab3&lt;/li&gt;
                  &lt;/ul&gt;
  
  </code></pre>
  
  <pre><code>&lt;------------------------ Javascript ------------------------&gt;
  $(document).ready(function () {
      InitLoadTabstrip();
  
  });
  
  function InitLoadTabstrip() {
      var ts = $("#tabstrip").kendoTabStrip({
          animation: { open: { effects: "fadeIn" } },
  
          select: function(element){selecttab(element)},
          contentUrls: [
  
                      'Page1.html',
                      'Page2.html',
                      'Page3.html',                    
  
          ]
      }).data('kendoTabStrip');
  
  }
  
  function selecttab(element) {
      var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
      var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
      itemIdx = item.index();   
      $("#tabstrip").data("kendoTabStrip").select(itemIdx);                
  }
  
  function AddTab() {
      var title = jQuery("#tabname").val();
      var Address = jQuery("#tabLink").val();
      var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
      tabStrip.append({
          text: title,
          contentUrl: Address
      });
      tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
  }
  function closeTab() {
      var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
      tabStrip.remove(tabStrip.select());
      tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
  }
  
  
  </code></pre>
  
  <p>It should get a name and an Address and add that tab to the tabstrip or remove it based on the button.
  I'd really appreciate it if someone could help.</p>
  
  <p>&lt;---------------------------- A quick update -----------------------------></p>
  
  <p>I tried to remove the buttons and simply add a single parameter to the addTab function to add each page that the is called . something like this :</p>
  
  <pre><code>function addTab(tabName) {
  
      var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
      if (tabName == "name1") {
          tabStrip.append({
              text: "title1",
              contentUrl: 'page1.html',
          });
      }
      else if (tabName == "name2") {
          tabStrip.append({
              text: "title2",
              contentUrl: 'page2.html',
          });
      }
      tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
  }
  
  </code></pre>
  
  <p>and call them like this :</p>
  
  <pre><code>$(document).ready(function () {
      InitLoadTabstrip();
  
  });
  
  function InitLoadTabstrip() {
      var ts = $("#tabstrip").kendoTabStrip({
          animation: { open: { effects: "fadeIn" } },
  
          select: function(element){selecttab(element)},
          contentUrls: [
  
          ]
      }).data('kendoTabStrip');
  
      addTab("name1");
      addTab("name2");
  
  }
  
  </code></pre>
  
  <p>right now the problem is when I try to add more than one tab , one after the other(like the code), tabstrip sets both list items as active and it breaks the tabstrip. I think it's probably because of the 'tabstrip.select' , but I don't really understand what went wrong .</p>