JSFiddle - React, Tailwind, and code Playground

by WhiteRau

HTML

<form id="clientDataForm" action="db_commit.php" method="post">
    <fieldset id="limitData">
        <label class="lookitme">Step 3. Employee Names and Coverage Limits</label>
        <p>Input the employee names and coverage limits. Employees can also be grouped into categories. Please see the table footnotes below for more detailed information on the proration and coverage percentage choices.</p>
        <div class="roundedWrapper greyBG">
        <table id="limitAmounts" title="Employee Annual Limit Amounts">
            <caption>Enter all the relevant data below.  Please be thorough.</caption>
            <thead>
                <tr>
                    <th class="type">Type</th>
                    <th class="empName">Name</th>
                    <th class="limit">Annual Limit</th>
                    <th class="prorate">Proration<sup>1</sup></th>
                    <th class="coverage">% Coverage<sup>2</sup></th>
                    <th class="category">Category</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody id="capturedData">
                <!-- this is where the file data and/or the typed-in data will go -->
            </tbody>
            <tfoot>
                <tr id="extraHeader">
                    <th class="type">Type</th>
                    <th class="empName">Name</th>
                    <th class="limit">Annual Limit</th>
                    <th class="prorate">Proration<sup>1</sup></th>
                    <th class="coverage">% Coverage<sup>2</sup></th>
                    <th class="category">Category</th>
                    <th>&nbsp;</th>
                </tr>
                <tr id="grabData">
                    <td class="selectList">
                        <select class="typeCell" name="catgegoryList" id="categoryList" tabindex="300"
                         onChange="markFilled('categoryList', this.value);">
                             <option>Pick:</option>
            ...

JavaScript

function injectNewData()
{
    var theType = $("categoryList").value;
    var theName = $("empName").value;
    var theLimit = $("limit").value;
    var theProrate = $("prorate").value;
    var theCoverage = $("coverageList").value;
    var theCategory = $("catList").value;
    
    var classNames = Array("type", "empName", "limit", "prorate", "coverage", "category");
    var classNames2 = Array("typeCell", "nameCell", "limitCell", "proCell", "covCell", "catCell");
    var dataArray = Array(theType, theName, theLimit, theProrate, theCoverage, theCategory);
    console.log("dataArray contains: " + dataArray);
    var newRow = document.createElement("tr");
    newRow.className = "newDataRow";
    newRow.id = 'newRow'+counter;
    
    for (var k=0; k < dataArray.length; k++)    //    create table row of inputs populated with data from the input row
    {
        var newName = document.createElement("td");
        var newInput = document.createElement("input");
        
        newName.className = classNames[k];
        newInput.className = classNames2[k];
        newInput.type = 'text';
        newInput.value = dataArray[k];
        newName.appendChild(newInput);
        newRow.appendChild(newName);
    }
    
    var newOK = document.createElement('td');
    newOK.className = 'newOKCell';
    
    var newText = document.createElement('p');    
    newText.name = 'okay';
    newText.innerHTML = "&nbsp;";
    newText.className = 'newOKText';
    
    newOK.appendChild(newText);
    newRow.appendChild(newOK);
    
    $("capturedData").appendChild(newRow);
    counter++;
    
    $('empName').focus();
}


                $('nextStep').addEvent('click', function(e) {
                    console.log('BAM! form intercepted!');
                    $('clientDataForm').send();