JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<ul data-bind="foreach: answers">
        <li>
            <a class="hiddenButton" href="#" data-bind="click: answerClick" > </a>
            <div class="answerNumber" data-bind="visible: showAnswerNumber">
                <h2 data-bind="text: answerNumber" />
            </div>
            <div class="answer" data-bind="visible: showAnswerText">
                <p data-bind="text:text" />
                <p data-bind="text: points" />
            </div>
           
        </li>
    </ul>

CSS

html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0;
        }
        a.hiddenButton
        {
            width:100%;
            height:100%;
            /*position:absolute;*/
            top:0;
            left:0;
            z-index:10;
            background-color: #ccc;
        }

JavaScript

var answerViewModel = function() {
    var self = this;

    //clicks
    self.answerClick = function() {
        self.showAnswerNumber(!self.showAnswerNumber());
    };

    //observables
    self.answerNumber = ko.observable();
    self.text = ko.observable();
    self.points = ko.observable();
    self.showAnswerNumber = ko.observable(true);

    //computed
    self.showAnswerText = ko.computed(function() {
        return !self.showAnswerNumber();
    });
};

var roundViewModel = function() {
    var self = this;
    self.answers = ko.observableArray();
};

var answer1 = new answerViewModel();
answer1.text = "foo answer";
answer1.answerNumber = 1;
answer1.points = 50;

var vm = new roundViewModel();
vm.answers.push(answer1);

ko.applyBindings(vm);