JSFiddle - React, Tailwind, and code Playground

by MaurizioPiccini

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<div id="searchResultQuotes" data-bind="visible: $root.showResultTable">
    <div id="resultTable">
        <table id="my-table">
            <thead id="resultTableHeader">
                <tr data-bind="foreach: gridOptions.columns">
                    <th data-bind="visible: checked, text: header">
                    </th>
                </tr>
            </thead>
            <tbody id="resultTableBody" data-bind="foreach: simpleSearchResultsArray">
                <tr>
                    <td>
                        <span data-bind="text: $index()+1"></span>
                    </td>
                    <td>
                        <span data-bind="text: jobName"></span>
                    </td>
                    <td>
                        <span data-bind="text:qName"></span>
                    </td>
                    <td>
                        <a  style="margin-left: auto; margin-right: auto; border: none; background: transparent;box-shadow: none;" data-role="button" data-icon="table_view" data-iconpos="notext" style="text-decoration: none; top: 1%" data-bind="click:function(){ $root.ShowQuotesDetails(qName);}"></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


<div id="QdetailsDiv" >
    <div>
        <div>
            <div>
                <span>Job Name</span></div>
            <div data-bind="with: $root.QuoteSimpleSearchVM">
                <input type="text" id="txtQDJobName" data-bind="value:jobName" /></div>
        </div>
        <div>
            <div>
                <span>Scenarios</span></div>
            <div data-bind="with:...

JavaScript

ProductDetails = function () {
    var self = this;
    self.Line = ko.observable();
    self.HighLevel = ko.observable();
    self.Designation = ko.observable();  
};

QuoteDetails = function () {
    var self = this;
    self.jobName = ko.observable();
    self.scenarios = ko.observable();
};

function SimpleSearchResults() {
    var self = this;
    self.index = ko.observable();
    self.jobName = ko.observable();
    self.qName = ko.observable();
    self.view = ko.observable();

    self.quoteDetailsObj = new QuoteDetails();
    self.ProductDetailsArrObj = ko.observableArray([]);
        
    self.BindProductsDetails = function () {
        var tempArray = [];
        console.log(self.ProductDetailsArrObj());
        var data=[{itemNumber:'1',highLevelItem:'HL1',designation:'1'}, {itemNumber:'2',highLevelItem:'HL2',designation:'2'}, {itemNumber:'3',highLevelItem:'HL3',designation:'3'}];
        
        for (var k = 0; k < data.length; k = k + 1) {
            var tempProdDetails = new ProductDetails();
            tempProdDetails.Line(data[k].itemNumber);
            tempProdDetails.HighLevel(data[k].highLevelItem);
            tempProdDetails.Designation(data[k].designation);
            tempArray.push(tempProdDetails);
        }
        console.log(tempArray.length);
       self.ProductDetailsArrObj(tempArray);
        ko.applyBindings(self.ProductDetailsArrObj, document.getElementById("LineItemresult"));
    };
    
    self.BindDataToQuotesDetailVM = function () {
        self.quoteDetailsObj.jobName("job name 1");
        self.quoteDetailsObj.scenarios("scenario 1");
        ko.applyBindings(self.quoteDetailsObj, document.getElementById("QdetailsDiv"));
       self.BindProductsDetails();
    };
};

function QuoteSimpleSearchVM() {
    var self = this;
    self.showResultTable = ko.observable(false);
    self.showQuoteDetails= ko.observable(false);
    
    self.simpleSearchResultsArray = ko.observableArray([]); 
    
     self.gridOptions = {
       ...