JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<button class="btn btn-default btn-sm" data-bind="click: toggleFavorite, css: { favorited: cssToggle}" style="padding: 0px 7px; font-size: 20px; margin-left: 10px; color: #cccccc;"><span class="glyphicon glyphicon-star" style="padding-top: 5px;"></span>

</button>
<select data-bind="value: selectedProject" class="selectpicker" data-live-search="true">
    <optgroup data-bind="attr: {label: 'Favorites'}, foreach: {data: $root.projects, as: 'projectAlias'}">
        <!-- ko if: favorite() -->
        <option data-bind="text: project_name, value: projectAlias"></option>
        <!-- /ko -->
    </optgroup>
    <option data-divider="true"></option>
    <!-- ko foreach: {data: $root.projects, as: 'projectAlias'} -->
    <!-- ko if: !favorite() -->
    <option data-bind="text: project_name, value: projectAlias"></option>
    <!-- /ko -->
    <!-- /ko -->
</select>

CSS

.favorited {
    background-color: #f0ad4e !important;
    border: #eea236;
}
.favorited span {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

JavaScript

// Initial data
var entriesdata = [{
    "entry_id": "51814",
        "project_id": "2",
        "user_id": "1"
}];

var projectsdata = [{
    "project_txt": "Test 1",
        "project_id": "1",
        "favorite": true
}, {
    "project_txt": "Test 2",
        "project_id": "2",
        "favorite": true
}, {
    "project_txt": "Test 3",
        "project_id": "3",
        "favorite": false
}, {
    "project_txt": "Test 4",
        "project_id": "4",
        "favorite": true
}, {
    "project_txt": "Test 5",
        "project_id": "5",
        "favorite": false
}, {
    "project_txt": "Test 6",
        "project_id": "6",
        "favorite": false
}, {
    "project_txt": "Test 7",
        "project_id": "7",
        "favorite": false
}, {
    "project_txt": "Test 8",
        "project_id": "8",
        "favorite": false
}];

var ProjectsViewModel = function (project) {

    var self = this;

    self.project_id = project.project_id;
    self.project_name = project.project_txt;
    self.favorite = ko.observable(project.favorite);
}

// Main entries binding
var TimeEntriesModel = function (entries, projects) {
    var self = this;
 
    self.projects = ko.observableArray(ko.utils.arrayMap(projects, function (project) {
        return  new ProjectsViewModel(project);
    }));
    self.srk = ko.computed(function(){
    	return 1;
    });

    self.selectedProject = ko.observable();
    self.cssToggle = ko.computed(function () {
        if (self.selectedProject()) {
            return self.selectedProject().favorite();
        }
        return false;
    });


    self.toggleFavorite = function () {
        var currentState = self.selectedProject().favorite();
        self.selectedProject().favorite(!currentState);
        self.selectedProject.valueHasMutated();
    } 
}

var entriesModel = new TimeEntriesModel(entriesdata, projectsdata);

entriesModel.selectedProject.subscribe(function (newValue) {
    console.log("New Selection is favorite? " + newValue.favorite())
});
...