JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<!-- input screen templates -->

    <script type="text/html" id="lottery-line-box">
        <div class="hl_lottolinebox">
            <input type="text" data-bind="value:n, disable: $parent.isDisabled, event : { blur : $parent.onBlur, focus : $parent.onFocus }, uniqueName:true" class="hl_lotteryNumber" maxlength="2"/>
        </div>
    </script>
    
    <script type="text/html" id="lottery-line">
        <div class="hl_lotteryRow">            
                <div class="hl_linediv hl_linenum">
                    <span data-bind="text: ticketNumber"></span>
                </div>                
                <!-- ko template : {name:'lottery-line-box',foreach: numbers} --><!-- /ko -->                
                <div class="hl_luckyDip hl_linediv">
                    <a data-bind="click:ldClick" href="javasript:void(0);">Lucky Dip</a>
                </div>
                <div class="hl_clearbox hl_linediv">
                    <a data-bind="click: $parent.clearLine" href="javasript:void(0);" title="clear/delete line" alt="clear/delete line">x</a>
                </div>
        </div>
    </script>

    <!-- confirmation screen templates -->
    
    <script type="text/html" id="conf-ltt-ln-bx">
        <div class="hl_lottolinebox confirm">
            <span data-bind="text: $data.n" class="hl_lotteryNumber" maxlength="2"/></span>
        </div>
    </script>
    
    <script type="text/html" id="conf-lttry-line">
        <div class="hl_lotteryRow confirm">            
                <div class="hl_linediv hl_linenum confirm">
                    <span data-bind="text: ticketNumber"></span>
                </div>
                <div data-bind="template : {name:'conf-ltt-ln-bx',foreach: numbers}"></div>            
                
        </div>
    </script>
    
    <!-- confirmation screen templates end -->

<fieldset style="background: transparent;...

CSS

body{ background-color:#EEEEEE; }

INPUT.hl_lotteryNumber {
            width : 35px;            
            
            -moz-border-radius: 3px;
            border-radius: 3px;
            border-width:1px;
            backgroundColor: #FFFFFF;
            clear:both;
        }
        
        .hl_lotteryRow {
            width : 350px;
            clear:both;
            height:20px;
            margin:2px;
            padding:2px;
        }
        
        .hl_lotteryRow.confirm {
            color:#FF00FF;
            padding-left:0px;
            margin-left:0px;
        }
        
        .hl_luckyDip {        
            font-size: 10px;
            -moz-border-radius: 3px;
            border-radius: 3px;    
            height:18px;
            background-color : #00ACC4;
            margin-top:1px;
        }
        
        .hl_luckyDip a {
            position :relative;
            top : 2px;            
            padding:3px;
            color:white;
            font-family: Arial, Helvetica, sans-serif;    
            font-weight:bold;
            text-decoration:none;
        }
        
        .hl_clearbox {
            font-size: 10px;
            font-family: Arial, Helvetica, sans-serif;    
            font-weight:bold;
            height:18px;
            
            background-color : #E0004E;
            
            -moz-border-radius: 3px;
            border-radius: 3px;    

            margin-left:3px;
            margin-top:1px;
            
        }
        
        .hl_clearbox a {    
            position :relative;
            top : 1px;
            color:white;
            text-decoration:none;
            font-family: Arial, Helvetica, sans-serif;    
            font-weight:bold;
            padding:3px 7px;
        }

        .hl_lottolinebox {
            float:left;
            clear:none;
            width:45px;
        }
        
        .hl_lottolinebox.confirm 
        {
            width:30px;
           ...

JavaScript

$(function () {

        function LotteryNumbers(ticketNumber_) {
            var self = this;

            self.numbers = [
                { n: ko.observable('') },
                { n: ko.observable('') },
                { n: ko.observable('') },
                { n: ko.observable('') },
                { n: ko.observable('') }
            ];

            self.isLD = ko.observable(false);
            self.errMsg = ko.observable('');
            self.isEnabled = ko.observable(false);

            self.isDisabled = ko.computed(function () {
                return self.isLD() && !self.isEnabled();
            }, this);

            self.isInUse = false;
            self.ticketNumber = ko.observable(ticketNumber_);

            self.clear = function () {
                self.isLD(false);
                self._error(false);
                self._isCompleted(false);
                self._isEmpty(true);
                for (var i = 0; i < self.numbers.length; i++) {
                    self.numbers[i].n('');
                };
            };

            self.isLD.subscribe(function (val) {
                if (val) self._error(false);
                for (var i = 0; i < self.numbers.length; i++) {
                    if (val)
                        self.numbers[i].n('LD');
                    else
                        self.numbers[i].n('');
                };
            })

            self.ldClick = function () {
                self.isLD(!self.isLD());
            };

            /* Error handling Below */
            self._isEmpty = ko.observable(true);
            self._isCompleted = ko.observable(false);
            self._hasDuplicate = ko.observable(false);

            self._inFocus = ko.observable(false);  /* in focus set */
            self._inFocusThrottled = ko.computed(self._inFocus).extend({ throttle: 10 });
            self._inFocusThrottled.subscribe(function (val) {

                if (!self._inFocus()) {
                    var tmpBool;

     ...