JSFiddle - React, Tailwind, and code Playground

HTML

<table>
                <thead><tr>
                    <th>Feature</th>
                    <th>Cost</th>
                </tr></thead>
                <tbody data-bind="foreach: features">
                    <tr>
                        <td><select data-bind="options: $root.featuresList, value: feature, optionsText:'description'"></select></td>
                        <td data-bind="text: feature().description"></td>
                        <td data-bind="text: feature().price"></td>
                        <td><a href="#" data-bind="click: $root.removeFeature">Remove</a></td>
                    </tr>
                </tbody>
            </table>

            <a href="#" data-bind="click: addNewFeature">Add a feature</a>

JavaScript

var Feature = function (desription, price)
     {
        var self = this;

        var _description = desription;
        self.description = ko.observable(_description);

        var _price = price;
        self.price = ko.observable(_price);
    }
    
var ItemFeature = function(feature) 
     {
        var self = this;

        var _feature = feature;
        self.feature = ko.observable(_feature);
    }

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

        self.featuresList = [
        new Feature("Feature 1", 1.50),
        new Feature("Feature 2", 2.00)
        ];

        self.features = ko.observableArray();

        self.addNewFeature = function () {
            self.features.push(new ItemFeature(self.featuresList[0]));
        }

        self.removeFeature = function (sender) {
            self.features.remove(sender);
        }
    }
        
    var _viewModel = new Item();
    _viewModel.addNewFeature();
    ko.applyBindings(_viewModel);