JSFiddle - React, Tailwind, and code Playground

by Ebram

HTML

<table id="userlist2" class="tablesorter" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Queue</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: players">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: queue"></td>
            <td data-bind="text: score"></td>
        </tr>
    </tbody>
</table>

JavaScript

function PlayerViewModel() {
    var self = this;

    self.players = ko.observableArray([]);

    self.addPlayer = function (Name, QueuePos, Score) {
        //console.log(self.players());
        self.players.push({
            name: Name,
            queue: QueuePos,
            score: Score
        });
    }
    self.removePlayer = function (Name) {
        for (var i = 0; i < self.players().length; i++) {
            if (self.players()[i].name == Name) {
                console.log(i);
                self.players.splice(i, 1);
            }
        }

    }
}


players = new PlayerViewModel();
ko.applyBindings(players);

players.addPlayer('Player1', '0', '0');
players.addPlayer('Player2', '0', '0');
players.removePlayer('Player2', '0', '0');