JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><input type="checkbox" data-bind="checked: sections" value="sectionA"/>Section A</li>
    <li><input type="checkbox" data-bind="checked: sections" value="sectionB"/>Section B</li>
    <li><input type="checkbox" data-bind="checked: sections" value="sectionC"/>Section C</li>
</ul>

<table id="offers">
    <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Section</th>
    </tr>
    <tr data-bind="visible: isChecked('sectionA')">
        <td>Lorem</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>A</td>
    </tr>
    <tr data-bind="visible: isChecked('sectionB')">
        <td>Ipsum</td>
        <td>Curabitur pulvinar quam vitae posuere scelerisque.</td>
        <td>B</td>
    </tr>
    <tr data-bind="visible: isChecked('sectionC')">
        <td>Dolor</td>
        <td>Curabitur tempor, et aliquam nisl nibh at velit.</td>
        <td>C</td>
    </tr>
    <tr data-bind="visible: isChecked('sectionB')">
        <td>Sit</td>
        <td>Pellentesque vitae ligula id sapien viverra faucibus.</td>
        <td>B</td>
    </tr>
</table>

JavaScript

function FormViewModel(data) {
    var self = this;
    self.sections = ko.observableArray(data);
    self.isChecked = function(section) {
        return self.sections().indexOf(section) > -1;
    }
}

ko.applyBindings(new FormViewModel(['sectionA', 'sectionB', 'sectionC']));