JSFiddle - React, Tailwind, and code Playground

HTML

<select data-bind="foreach: $data.answers, value: selectedAnswer">
    <option data-bind="css: $data.getScoringLevel, value: $data, text: $data.text"></option>
</select>

JavaScript

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

    self.id = '1';
    self.text = 'Test';
    self.sendAnswerToWebService = true;
    self.scoringLevel = ko.observable(1);

    self.getScoringLevel = ko.computed(function () {
        switch (self.scoringLevel()) {
            case 1:
                return 'red';
            case 2:
                return 'orange';
            case 3:
                return 'yellow';
            default:
                return '';
        }
    }, self);
};

function ViewModel(){
    var self = this;
    
    self.answers = ko.observableArray([new Answer()])
    self.selectedAnswer = ko.observable();
        
}

ko.applyBindings(new ViewModel());