JSFiddle - React, Tailwind, and code Playground

by XstreamINsanity

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>

<ul data-bind="template: {name: 'listTempl', foreach: list }">
</ul>

<script id="listTempl" type="text/html">
  <li data-bind="text: name"></li>
</script>

JavaScript

$(function() {
	var data = [{name: "Bob"}, {name: "Joe"}, {name: "John"}];
  
  var viewModel = {
  	list: ko.observableArray(data),
    addItem: function() {
    	this.list.push({name: "Steve"});
    },
    removeItem: function() {
    	this.list.pop();
    }
  };
  
  ko.applyBindings(viewModel);
});