JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<span>Questions</span>
<table data-bind="foreach: questions">
    <tr data-bind="click: function(){$parent.selectionne($data)}, css :{selec : $parent.selectionne() == $data}">
        <td data-bind="text: libelle"></td>
    </tr>
</table>
<br/>
<span>Réponses</span>

<div data-bind="if: selectionne">
    <table data-bind="foreach: selectionne().reponses">
    <tr>
        <td data-bind="text: libelle"></td>
    </tr>    
    </table>
    <div>
        <input data-bind="value:tmpValReponse" type="text" />
        <input data-bind="click: ajouterReponse" type="button" value="ajouter" />
    </div>
</div>

CSS

ul {
    border: 1px solid #CCC;
    position: absolute;
}

span{
    text-decoration: underline;
}

td {
    cursor: pointer;
}

.selec {
    background-color: #AAA;
}

JavaScript

var question = function(data){
    var self = this;
    this.libelle =ko.observable(data);
    this.reponses = ko.observableArray([]);
    
    this.addReponse = function(libelle) {
        self.reponses.push(new reponse(libelle));       
    }
}

var reponse = function (data){
    this.libelle = ko.observable(data);               
}    
    
var theViewModel = function () {
    var self = this;
    this.questions = ko.observableArray([]);
    this.selectionne = ko.observable();
    this.tmpValReponse = ko.observable();
    
    this.ajouterReponse = function(){
        self.selectionne().addReponse(self.tmpValReponse());
    }
}

    var vm = new theViewModel();
    var q1 =new question("qui est-il");
    q1.addReponse("Ce fabuleux héros");
    var q2 =new question("d'où viens-t-il");
    q2.addReponse("des temps nouveaux");

    vm.questions.push(q1);
    vm.questions.push(q2);

ko.applyBindings(vm);