JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<div data-bind="with: formatterVM">
    <div data-bind="with: currentRule">
        <ul data-bind="foreach: conditions">
            <li data-bind="html: x"></li>
            <li data-bind="html: y"></li>
        </ul>
        <button data-bind="click: addCondition">Click</button>
    </div>
</div>

JavaScript

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function ReportsVM() {
    self = this
    self.formatterVM = new FormatterVM()
}

function FormatterVM(){
    self = this
    self.rules = ko.observableArray()
    self.currentRule = ko.observable(new Rule())
}

function Rule(){
    self = this
    self.conditions = ko.observableArray()
    self.addCondition = function(){
        self.conditions.push(new Condition(2,3))
    }
}

function Condition(x,y){
    self = this
    self.x = x
    self.y = y
}
// Activates knockout.js
ko.applyBindings(new ReportsVM());