JSFiddle - React, Tailwind, and code Playground

by Ninjanoel

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script type="text/html" id="lottery-line-box">
   <input type="text" data-bind="value:n, disable: $parent.isLD, event: { blur : $parent.onBlur}, uniqueName:true" class="lotteryNumber" maxlength="2"/>
</script>
    
    <script type="text/html" id="lottery-line">
        <div>
            <span data-bind="text: ticketNumber"></span>
            <!-- ko template : {name:'lottery-line-box',foreach: numbers} --><!-- /ko -->
            <span class="luckyDip" data-bind="click:setLDFromText">Lucky Dip</span><input type="checkbox" data-bind="checked : isLD, click: setLD" />
            <a data-bind="click: $parent.clearLine" href="javasript:void(0);" class="clearLink" title="clear/delete line" alt="clear/delete line">x</a>
            <a data-bind="click: report" >report</a>
        </div>
    </script>

    <form id="testForm">
    
        <select data-bind="options: optionValues, value: selectedOptionValue"></select>
        
        <div data-bind="template : {name: 'lottery-line', foreach: Lines, afterRender: afterRender}" ></div>
        
        <input type="button" value="add line" data-bind="click: addLine" />
        
        <span data-bind="text: linesCount"></span>
    
    </form>

CSS

.lotteryNumber {
            width : 35px;
            padding: 3px;
        }
        
        .clearLink {
            color:red;
            font-weight:bold;
            
            font-size: 14px;
            font-family:sans-serif, 'Comic Sans';
            padding:4px;
        }
        
        .luckyDip {
        
            font-size: 8px;
            
        
        }

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('')}
                ];
                
                arr: ko.observableArray([
                    { myVal: ko.observable("test1") }, 
                    { myVal: ko.observable("test2") }
                ]);
                
                self.isLD = ko.observable(false);
                self.isInUse = false;
                self.ticketNumber = ko.observable(ticketNumber_);                    
                                
                self.clear = function() {
                    self.isLD(false);                    
                    for (var i = 0; i < self.numbers.length; i++) {                        
                        self.numbers[i].n('');
                    }
                };
                
                self.setLD = function() {                    
                    var boolLD = ko.utils.unwrapObservable(self.isLD());
                    for (var i = 0; i < self.numbers.length; i++) {                        
                        if (self.isLD())
                            self.numbers[i].n('LD');
                        else 
                            self.numbers[i].n('');
                    }
                    return true;
                };
                
                self.setLDFromText = function() {
                    
                    var boolLD = ko.utils.unwrapObservable(self.isLD());
                    self.isLD(!boolLD);
                    self.setLD();
                }
                
                self.report = function() {
                    var txt = '';                    
            ...