JSFiddle - React, Tailwind, and code Playground

by nickolsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<div data-bind="with: Transactions.Transaction" style=' font-family:Tahoma; font-size:10px;'>
    <div style='border-color: #99ba12;
border-style: solid; width: 430px;
border-width: 2px; margin: 15px 0 15px 0;
padding: 5px;'>You edi identifiers:
    <ul>
        <li style='padding: 3px 0 3px 0'><strong>ISA QUALIFIER:</strong>  <span data-bind='text: SenderEDIID["@ISA_QUALIFIER"]'>&nbsp;</span>

        </li>
        <li style='padding: 3px 0 3px 0'><strong>ISA:</strong>  <span data-bind='text: SenderEDIID["@ISA_ID"]'>&nbsp;</span>

        </li>
        <li style='padding: 3px 0 3px 0'><strong>GS:</strong>  <span data-bind='text: SenderEDIID["@GS_ID"]'>&nbsp;</span>

        </li>
        <li style='padding: 3px 0 3px 0'><strong>Supplier name:</strong> 
            <input data-bind='value: SU_Name'>&nbsp;</input>
        </li>
        <li style='padding: 3px 0 3px 0'><strong>Supplier code:</strong> 
            <input data-bind='value: SU_Code'>&nbsp;</input>
        </li>
    </ul>
    </div>
    <table style='width: 450px; border-collapse: separate;'>
        <thead>
            <tr style="background-color:#E5EDC4; height:0.3in">
                <th style="border-color:#99BA12; border-style:solid; border-width:1px; color:black; font-family:Tahoma; font-size:10px; width:0.24in; margin: 3px; padding: 3px">BUYER'S PART NUMBER</th>
                <th style="border-color:#99BA12; border-style:solid; border-width:1px; color:black; font-family:Tahoma; font-size:10px; width:0.24in; margin: 3px; padding: 3px">VENDOR'S (SELLER'S) PART NUMBER</th>
<th style="border-color:#99BA12; border-style:solid; border-width:1px; color:black; font-family:Tahoma; font-size:10px; width:0.24in; margin: 3px; padding: 3px">PRICE</th>
<th style="border-color:#99BA12; border-style:solid; border-width:1px; color:black; font-family:Tahoma; font-size:10px; width:0.24in; margin: 3px;...

JavaScript

String.prototype.padRight = function(l, c) {
            return this + Array(l - this.length + 1).join(c || " ")
        };

        var vm = {
            Transactions: {
                Transaction: {
                    SenderEDIID: {
                        "@ISA_ID": '{ISA_ID}',
                        "@ISA_QUALIFIER": '{ISA_ID_QUALIFIER}',
                        "@GS_ID": '{GS_ID}',
                    },
                    ReceiverEDIID: {
                        "@ISA_ID": 'TBBEDI',
                        "@ISA_QUALIFIER": 'ZZ',
                        "@GS_ID": 'TBBEDI',
                    },
                    "@type": "CM_SPOKE_866",
                    "@doc_id": "{ISA_ID}-" + (new Date()).getTime(), 
                    SU_Code: "0001",
                    SU_Name: "Supplier",
                    Lines: [{
                        BP: "",
                        VP: "",
                        PRICE: 1,
                        QTY: 1
                    }]
                }
            }
        };

        window.DocumentViewModel = ko.mapping.fromJS(vm);
        window.DocumentViewModel.addLine = function() {
            window.DocumentViewModel.Transactions.Transaction.Lines.push({
                BP: ko.observable(""),
                VP: ko.observable(""),
                PRICE: ko.observable(""),
                QTY: ko.observable("")
            });
        };

        window.DocumentViewModel.removeLine = function(line) {
            window.DocumentViewModel.Transactions.Transaction.Lines.remove(line);
        };

        window.DocumentViewModel.Transactions.Transaction.EDI = ko.computed(function() {
            var tran = window.DocumentViewModel.Transactions.Transaction;
            var ediid = tran.SenderEDIID;
            var header = "ISA*00*          *00*          *ZZ*TBBEDI         *";
            header += ediid["@ISA_QUALIFIER"]() + "*" + ediid["@ISA_ID"]().padRight(15, " ") + "*130215*0720*U*00400*000000001*0*T*>~";
          ...