JSFiddle - React, Tailwind, and code Playground

HTML

<script src="jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div class="jqx-widget">
    <div data-bind="dropDownTree:{source:[{ "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "value": "$2.3"
            }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1",
                    "value": "$2.3"
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano",
                    "value": "$2.3"
                    }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6",
                    "value": "$2.3"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6",
                    "value": "$2.3"
                    }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6",
                    "value": "$2.3"
                }, {
                    "id": "11",
                   ...

JavaScript

ko.bindingHandlers.dropDownTree = {
    init: function (element, valueAccessor, allBindings, viewModel) {
        var $el = $(element),
            $tree = $('<ul />'),
            options = ko.unwrap(valueAccessor()),
            src = {
                datatype: 'json',
                datafields: [{
                    name: 'id'
                }, {
                    name: 'parentID'
                }, {
                    name: 'label'
                }, {
                    name: 'value'
                }, {
                    name: 'html'
                }, {
                    name: 'disabled'
                }, {
                    name: 'checked'
                }, {
                    name: 'expanded'
                }, {
                    name: 'selected'
                }, {
                    name: 'items'
                }, {
                    name: 'icon'
                }, {
                    name: 'iconsize'
                }],
                id: 'id',
                localdata: options.source
            },
            dp = new $.jqx.dataAdapter(src, {
                loadComplete: function (records) {
                    $tree.jqxTree({
                        source: dp.records
                    });
                }
            });
        dp.dataBind();
        $el.jqxDropDownButton();
        $el.on('open', function () {
            if ($el.jqxDropDownButton('isOpened')) {}
        });
        $el.on('close', function () {
            if ($el.jqxDropDownButton('isOpened')) {}
        });
        $tree.on('select', function (event) {
            var args = event.args,
                item = $tree.jqxTree('getItem', args.element),
                ddContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
            $el.jqxDropDownButton('setContent', ddContent);
        });
        $el.jqxDropDownButton('setContent', '<div style="position: relative; margin-left: 3px;...