JSFiddle - React, Tailwind, and code Playground

by supercool

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