JSFiddle - React, Tailwind, and code Playground

by zapdafish

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css">
    <div data-model="viewModel" data-role="view" id="button-events" data-title="ButtonGroup MVVM" >
        <ul data-role="buttongroup" data-style="inset" data-type="group"
            data-index="3" id="IsFruity"
            data-bind="visible: isVisible,events: { select: onSelect}">
            <li id="IsFruityApples" data-bind=" events: {click: onClick }">Apples</li>
            <li id="IsFruityOranges" data-bind=" events: {click: onClick }">Oranges</li>
            <li id="IsFruityBananas" data-bind=" events: {click: onClick }">Bananas</li>
            <li id="IsFruityPeaches" data-bind=" events: {click: onClick }">Peaches</li>
            <li id="IsFruityPlums" data-bind=" events: {click: onClick }">Plums</li>
        </ul>


        <ul data-role="buttongroup" data-style="inset" data-type="group"
            data-index="-1"  id="IsTooty"
            data-bind="visible: isVisible,events: { select: onSelect }">
            <li id="IsTootyApples" data-bind=" events: {click: onClick }">Apples</li>
            <li id="IsTootyOranges" data-bind=" events: {click: onClick }">Oranges</li>
            <li id="IsTootyBananas" data-bind=" events: {click: onClick }">Bananas</li>
            <li id="IsTootyPeaches" data-bind=" events: {click: onClick }">Peaches</li>
            <li id="IsTootyPlums" data-bind=" events: {click: onClick }">Plums</li>
        </ul>

        <ul data-role="buttongroup" data-style="inset" data-type="group"
            data-index="-1" id="IsDiabetes"
            data-bind="visible: isVisible,events: { select: onSelect }" style="display:inline;"    >
            <li id="IsDiabetesYes" data-bind=" events: {click: onClick }">Yes</li>
            <li id="IsDiabetesNo"...

JavaScript

var viewModel = kendo.observable({
            isEnabled: true,
            isVisible: true,
            justSelectedIndex: -1,
            justSelected: true,
            bttnGroup: '',
            onClick: function (e) {               
                if(this.justSelected === false)
                {
                    var x = document.getElementById(e.currentTarget.id).parentNode;
                    $('#' + x.id).find('#' + e.currentTarget.id).removeClass("km-state-active");
                }else
                {
                    this.justSelected = false;
                }
            },

            onSelect: function (e) {
                var buttonGroup = e.sender;
                this.bttnGroup = e.sender;
                var index = buttonGroup.current().index();
                this.justSelected = true;
                this.justSelectedIndex = index;
            }
        });

        window.kendoMobileApplication = new kendo.mobile.Application(document.body);