JSFiddle - React, Tailwind, and code Playground

by spidercode

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="text" data-bind="text: Name">
<button data-bind='click: Add'>Add</button>

<div data-bind="foreach: DataSource">
  <div data-bind="text: $data">
  </div>
  <div>
    <a data-bind="click: $root.Remove">Remove</a>
  </div>
</div>

CSS

.name-container{
  padding: 5px;
  margin: 2px;
  background-color: #cacaca;
  border: 1px solid #888;
  border-radius: 5px;
}

.name-container span {
  margin: 5px;
}

body {
  font-family: arial,sans-serif;
  font-size: 13px;
}

JavaScript

var vm = function() {
		var self = this;
    self.Name = ko.observable();
    self.NameList = ko.observableArray();
    self.DataSource = ko.observableArray();
    self.Add = function(){
    	self.NameList.push(self.Name);
    };
    
    // self.DataSource(['aaa', 'bbb']);
    
    self.DataSource = ko.computed(function(){
    	var source = ko.observableArray();
       for(var i = 0; i < self.NameList().length; i++) {
      	source.push(self.NameList()[i] + '-AAA');
      }
      
      return source;
    });
    
    self.Remove = function(selectedData){
    	for(var i = 0; i < self.DataSource().length; i++) {
      	if(self.DataSource()[i] == selectedData) {
        	self.DataSource.remove(selectedData);
        }
      }
    }
}
 
ko.applyBindings(new vm());