JSFiddle - React, Tailwind, and code Playground

HTML

<select class="n_imported_country"                     
                data-bind="options: PlantSelected,
                                   optionsText :'name'   
                "
                >
        </select>
        <div data-bind="click: function(){
             $root.fillNewSelect();
        }">click to fill new select value</div>

JavaScript

var i = 1;
                optionsProvider = function(self) {
                    var self = self || {};
                    self.options = {};
                    self.get = function(name, initialValue) {
                        if (!self.options[name]) {
                            console.log("Called - " + name);
                            self.options[name] = ko.observableArray([initialValue]);
                            var requestHeader = '';
                            setTimeout(function() {
                                var aa = [{name: "plant 1" + i, selected: true}, {name: "palnt 2" + i, selected: false}];
                                self.options[name](aa);
                                i++;
                            }, 2000);
                        }
                        return self.options[name];
                    };
                    return self;
                };
                ViewModel = function() {
                    var self = this;
                    var k = 1;
                    var ob = new optionsProvider(self);
                    self.PlantSelected = ob.get("name" + k, '');
                    self.fillNewSelect = function() {
                        self.PlantSelected.removeAll();
                        self.PlantSelected().push(ob.get("name" + k, ''));
                        k++;
                    };
                };
                ko.applyBindings(new ViewModel());