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:
        <li><strong>ISA QUALIFIER:</strong>  <span data-bind='text: SenderEDIID.ISA_QUALIFIER'>&nbsp;</span>

        </li>
        <li><strong>ISA:</strong>  <span data-bind='text: SenderEDIID.ISA'>&nbsp;</span>

        </li>
        <li><strong>GS:</strong>  <span data-bind='text: SenderEDIID.GS'>&nbsp;</span>

        </li>
        <li><strong>Supplier name:</strong> 
            <input data-bind='value: SU_Name'>&nbsp;</input>
        </li>
        <li><strong>Supplier code:</strong> 
            <input data-bind='value: SU_Code'>&nbsp;</input>
        </li>
    </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; ">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; ">MOTOR VEHICLE ID NUMBER</th>
            </tr>
        </thead>
        <tbody data-bind='foreach: Lines'>
            <tr style="height:0.17in; vertical-align:middle; ">
                <td style="color:black; font-family:Tahoma; font-size:10px; text-align:right; width:0.24in; margin: 3px; ">
                    <input class='required' data-bind='value: BP, uniqueName: true' />
                </td>
                <td style="color:black; font-family:Tahoma; font-size:10px; text-align:right; width:0.24in; margin: 3px; ">
                    <input...

JavaScript

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

var vm = {
    Transactions: {
        Transaction: {
            SenderEDIID: {
                ISA: '{ISA_ID}',
                ISA_QUALIFIER: '{ISA_ID_QUALIFIER}',
                GS: '{GS_ID}',
            },
            ReceiverEDIID: {
                ISA: 'TBBEDI',
                ISA_QUALIFIER: 'ZZ',
                GS: 'TBBEDI',
            },
            SU_Code: "0001",
            SU_Name: "Supplier",
            Lines: [ { BP: "", VV: ""} ]
        }
    }
};

window.DocumentViewModel = ko.mapping.fromJS(vm);
window.DocumentViewModel.addLine = function () {
    window.DocumentViewModel.Transactions.Transaction.Lines.push({
        BP: ko.observable(""),
        VV: 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().padRight(15, " ") + "*130215*0720*U*00300*000000001*0*T*>~";
    header += "\r\nGS*SQ*TBBEDI*" + ediid.ISA() + "*20130215*0720*0001*X*003010~" + "\r\nST*866*0001~";

    header += "\r\nBSS*05*ZZ*130214*JS*130218*130315*00~";
    header += "\r\nUIT*EA~";
    header += "\r\nN1*SI*TBB~";
    header += "\r\nN1*SU*" + tran.SU_Name() + "*92*" + tran.SU_Code() + "~";
    header += "\r\nN1*ST*TBB*92*003233970~";
    var items = "";
    var lines = tran.Lines();
    for(var i = 0; i < lines.length; i++) {
        items += "\r\nLIN**BP*" + lines[i].BP() + "*VV*" + lines[i].VV() + "~"
    }
    var detail = "\r\nDTM*002*130218~";
    detail += "\r\nQTY*01*1~";
    detail += "\r\nREF*LF*A~";
    detail += items;
    detail +=...