JSFiddle - React, Tailwind, and code Playground

HTML

<table class="input-group">
    <tbody data-bind="foreach: loanDeductions">
        <tr>
            <td><strong data-bind='text: deductionName'></strong>

            </td>
            <td>
                <input class="deductionCode form-control" style="text-align: right" data-bind='value: amount, valueUpdate: "afterkeydown", attr: { "readonly": getreadonlyState() }' />
            </td>
            <td><a href='#' data-bind='click: $parent.removeLine'>Delete</a>

            </td>
            <td><a href="javascript:void(0);" data-bind="click: $parent.readonly"><span data-bind="text: linkText"></span></a>

            </td>
        </tr>
    </tbody>
</table>
<table>
    <tr>
        <td colspan="3">
            <select data-bind="options: loanDeductionsList(), optionsText: 'deductionName', optionsCaption: 'Choose a deduction..', value: selectedDeduction"></select>
        </td>
    </tr>
</table>

JavaScript

var initialData = [{
    deductionID: 1,
    deductionName: "Loan Redemption Fee",
    amount: 44.25
}, {
    deductionID: 2,
    deductionName: "ID Card",
    amount: 50.25
}, {
    deductionID: 3,
    deductionName: "Loan Discount",
    amount: 144.25
}, ];

var deductionLine = function (deductionID, deductionName, amount) {
    self = this;
    self.deductionID = ko.observable(deductionID);
    self.deductionName = ko.observable(deductionName);
    self.amount = ko.observable(amount);
    self.getreadonlyState = ko.observable('readonly');
    self.linkText = ko.computed(function () {
        return this.getreadonlyState() == 'readonly' ? "Edit" : "Stop Edit";
    }, self);
};

var deductionList = function (deductionID, deductionName, amount) {
    self = this;
    self.deductionID = ko.observable(deductionID);
    self.deductionName = ko.observable(deductionName);
    self.amount = ko.observable(amount);
    self.getreadonlyState = ko.observable('readonly');
    self.linkText = ko.computed(function () {
        return this.getreadonlyState() == 'readonly' ? "Edit" : "Stop Edit";
    }, self);
};

function LoanDeductions(deductions) {
    var self = this;
    self.loanDeductions = ko.observableArray(ko.utils.arrayMap(deductions, function (deduction) {
        return new deductionLine(deduction.deductionID, deduction.deductionName, deduction.amount)
    }));
    self.loanDeductionsList = ko.observableArray(ko.utils.arrayMap(deductions, function (deduction) {
        return new deductionList(deduction.deductionID, deduction.deductionName, deduction.amount)
    }));

    self.selectedDeduction = ko.observable();

    //edit link

    self.readonly = function () {
        if (true) {
            if (this.getreadonlyState()) {
                this.getreadonlyState(undefined);
            } else {
                this.getreadonlyState('readonly');
            }
        } else alert('Access denied!');
    }

    // adds deduction 
   ...