JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div>
    <p>Stuff Here:</p>
    <ul id = "junk" data-bind="foreach: myList">
       <li>
        <span data-bind="text: $data"></span>
       </li>
    </ul>
  </div>

  <div class="row" id="launch">
    <button data-bind="click: addToList.bind($data, [6,7,8,9])">Add</button>
    <button data-bind="click: replaceList.bind($data, [6,7,8,9])">Replace</button>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

</body>

JavaScript

var data = [1,2,3,4,5];
function viewModel() {
  var self = this;  
  self.myList = ko.observableArray(data); 

  self.addToList = function (listData) {
  	for (var i = listData.length; i-- > 0;)
       self.myList.push(listData[i]);
  }
  
  self.replaceList = function (listData) {
      self.myList(listData);
  }
}

var viewModel = new viewModel();
ko.applyBindings(viewModel, document.getElementById("body"));