JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
select "Study Arrival Time" from first select list which will have IS BETWEEN operator that renders two input elements. I would like to capture both the inputs and put into value observable in my model.
<br /> <br />

<div data-bind="foreach: rules">
    <label>Criteria: </label>        <select data-bind="options: operatorJson, optionsText: 'OperandName', value: oprands">
        </select>
        <div data-bind="with: oprands">
   <label>Operator: </label>         <select data-bind="options: ApplicableOperators, optionsText: 'OperatorName', value: $parent.operators">
            </select>
        </div>
        <div data-bind="with: operators">
            <label>Value: </label>
            <div data-bind="template: {name: templeteToUse(DisplayType)}">
            </div>
        </div>
    </div>
    <script type="text/html" id="freeTextTmpl">
        <input type="text" />
    </script>
    <script type="text/html" id="CheckBoxTmpl">
        <input type="checkbox"/>
    </script>
    <script type="text/html" id="RadioTmpl">
        <input type="radio"/>
    </script>
    <script type="text/html" id="ComboTmpl">
        <select></select>
    </script>
    <script type="text/html" id="SingleSelectListTmpl">
        <select></select>
    </script>
    <script type="text/html" id="MultiSelectListTmpl">
        <select multiple="multiple"></select>
    </script>
    <script type="text/html" id="RangeNumericTmpl">
        <input type="text"/>
        <input type="text"/>
    </script>
    <script type="text/html" id="RangeDateTmpl">
        <input type="text" class="datepickerFrom"/>
        <input type="text" class="datepickerTo"/>
    </script>
    <script type="text/html" id="RangeTimeTmpl">
        <input type="text" class="timepickerFrom"/>
...

JavaScript

function templeteToUse(id) {
    var type = null;
    switch (id) {
    case 0:
        type = "freeTextTmpl";
        break;
    case 1:
        type = "CheckBoxTmpl";
        break;
    case 2:
        type = "RadioTmpl";
        break;
    case 3:
        type = "ComboTmpl";
        break;
    case 4:
        type = "SingleSelectListTmpl";
        break;
    case 5:
        type = "MultiSelectListTmpl";
        break;
    case 6:
        type = "RangeNumericTmpl";
        break;
    case 7:
        type = "RangeDateTmpl";
        break;
    case 8:
        type = "RangeTimeTmpl";
        break;
    case 9:
        type = "CalendarTmpl";
        break;
    default:
        type = null;
    }
    return type;
}
var rule = function() {
    var self = this;
    self.oprands = ko.observable();
    self.operators = ko.observable();
    self.value = ko.observable();
};

var viewModel = function() {
    var self = this;
    self.rules = ko.observableArray([new rule()]);

};

$(document).ready(function() {
    ko.applyBindings(new viewModel());
});

var operatorJson = [
    {
    "OperandID": 1,
    "OperandName": "Order Modality",
    "ApplicableOperators": [
        {
        "OperatorName": "IS",
        "DisplayType": 3},
    {
        "OperatorName": "IS ONE OF",
        "DisplayType": 5}
    ]},
{
    "OperandID": 2,
    "OperandName": "Order Criticality",
    "ApplicableOperators": [
        {
        "OperatorName": "IS",
        "DisplayType": 3},
    {
        "OperatorName": "IS ONE OF",
        "DisplayType": 5}
    ]},
{
    "OperandID": 10,
    "OperandName": "Study Arrival Time",
    "ApplicableOperators": [
        {
        "OperatorName": "IS BETWEEN",
        "DisplayType": 8}
    ],
    "IsRequiresList": false,
    "OperandDataType": "time",
    "ListSourceInfo": ""},
    ]