JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="example2">
   <h5>Target</h5>
   <select multiple="multiple" data-value-field="id" data-text-field="name" data-bind="source: availableLocales, value: selectedLocales"></select>
</div>

<div id="example">
    <div  data-template="template" data-bind="source: locales"></div>
 </div>

<script id="template" type="text/x-kendo-template">
   <div>
       <label data-bind="text: target"></label>
       <select data-text-field="Filename" data-value-field="Path" data-bind="value: selectedFile, source:uploadedFiles" data-role="dropdownlist"></select>
   </div>
</script>

JavaScript

var viewModel2 = kendo.observable({
    selectedLocales: [],
    availableLocales: [{id:1, name:'German'}, {id:2, name:'French'}, {id:3, name:'Italian'}, {id:4, name:'Japanese'}, {id:5, name:'Chinese (Simplified)'}]
});

var viewModel = kendo.observable({
    uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}],
    locales: []
});

function updateLocales() {
    viewModel.set("locales", []);
    
    var selected = viewModel2.get("selectedLocales");
    for (var i = 0; i < selected.length ; i++) {
        viewModel.locales.push({ target: selected[i].get("name"), selectedFile: null });
    }
}

viewModel2.selectedLocales.bind("change", function(e) {
    updateLocales();
});

kendo.bind($("#example2"), viewModel2);
kendo.bind($("#example"), viewModel);