JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<table>

  <tr>
    <td>
      <input type="button" value="1" data-bind="click: hasBeenAdded() || isFull() ? null : function() { addNumber(1); }">
    </td>
    <td>
      <input type="button" value="2" data-bind="click: hasBeenAdded() || isFull() ? null :function() { addNumber(2); }">
    </td>
    <td>
      <input type="button" value="3" data-bind="click: hasBeenAdded() || isFull() ? null : function() { addNumber(3); }">
    </td>
    <td>
      <input type="button" value="4" data-bind="click: hasBeenAdded() || isFull() ? null : function() { addNumber(4); }">
    </td>
  </tr>
</table>
<h3>Available columns created by the user</h3> Column: <strong data-bind="text: column"></strong>
<br/> Last: <strong data-bind="text: last"></strong>

JavaScript

function viewModel() {
  var self = this;

  self.hasBeenAdded = ko.observable(false);
  self.isFull = ko.observable(false);
  self.last = ko.observable(0);

  self.column = ko.observableArray();

  self.addNumber = function(data) {
    //console.log('Added ', data);

    if (self.column().indexOf(data) < 0) {
      self.column.push(data);
      self.last(data);

      if (self.column().length >= 3) {
        self.isFull(true);
      }
    }
  }
}
ko.applyBindings(viewModel);