Hi,
I combined code form two examples found on your site in order to reproduce the bug.
The original example describes how to append tab to the tabStrip:
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/append
dojo editor: https://dojo.telerik.com/alEGIcod
I added this line
tabStrip.remove("li:first");
that was copied from the other example about removing tab:
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/remove)
Just "li:last" I replaced by "li:first"
Now the appended tab has content of the second tab "Content 2" instead of "Appended Tab 1 content".
The bug reproduced.
I think that the problem is that the both tabs have the same id: id="tabstrip-tab-2"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="tabstrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div>Content 1</div>
<div>Content 2</div>
</div>
<script>
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.remove("li:first"); // added line
tabStrip.append(
[{
text: "<b>Appended Tab 1</b>",
encoded: false,
content: "Appended Tab 1 content",
},
]
);
</script>
</body>
</html>
