JSFiddle - React, Tailwind, and code Playground

by houssamk

HTML

<table>
    <tr editmode="edit" incrementid="10" linenumber="10" referencenumber="10">
        <td class="hidden">
            <input id="line_10_10_invoiceSublineItemNumber" name="line_10_10_invoiceSublineItemNumber" type="text" value="10" title="#" class="fieldInput valid">
        </td>
        <td>
            <select id="line_10_10_invoiceSublineCostObjectType" name="line_10_10_invoiceSublineCostObjectType" class="fieldInput required-co-type-value-pair valid">
                <option value=""></option>
                <option value="AFE" selected>AFE</option>
                <option value="Cost Center">Cost Center</option>
            </select>
        </td>
        <td class="hidden">
            <input id="line_10_10_invoiceSublineAssignmentAmount" name="line_10_10_invoiceSublineAssignmentAmount" type="text" value="" title="Assignment" class="fieldInput valid">
        </td>
        <td>
            <input id="line_10_10_invoiceSublineCostObjectValue" name="line_10_10_invoiceSublineCostObjectValue" type="text" value="AFE123" title="Cost Object Value" class="fieldInput valid">
        </td>
        <td class="hidden">
            <input id="line_10_10_invoiceSublineLineItemNumber" name="line_10_10_invoiceSublineLineItemNumber" type="text" value="" title="Line Item Number" class="fieldInput valid">
        </td>
        <td class="hidden">
            <input id="line_10_10_invoiceSublineAfeNumber" name="line_10_10_invoiceSublineAfeNumber" type="text" value="" title="AFE" class="fieldInput valid">
        </td>
        <td class="hidden">
            <input id="line_10_10_invoiceSublineCostCenter" name="line_10_10_invoiceSublineCostCenter" type="text" value="" title="Cost Center" class="fieldInput valid">
        </td>
        <td class="hidden">
            <input id="line_10_10_invoiceSublineOrderNumber" name="line_10_10_invoiceSublineOrderNumber" type="text" value="" title="Order Number" class="fieldInput valid">
        </td>
        <td...

CSS

.hidden {
    display: none;
}

JavaScript

var lines = [{
    lineNumber: '',
    afe: '',
    costCenter: '',
    orderNumber: '',
    glCode: '',
    sublines: {
        afe: [{
            value: '',
            glCode: ''
        }],
        costCenter: [{
            value: '',
            glCode: ''
        }],
        orderNumber: [{
            value: '',
            glCode: ''
        }]
    }
}];
debugger;
$('table [editmode=edit]').each(function (i) {
    var lineNumber = $(this).attr('referencenumber');
    var lineNumbers = $.map(lines, function(line, index) {
        return line.lineNumber;
    });
    
    var type = $(this).find('[id$=invoiceSublineCostObjectType]').val().toLowerCase();
    var val = $(this).find('[id$=invoiceSublineCostObjectValue]').val();
    var gl = $(this).find('[id$=invoiceSublineGlAccount]').val();
    
    if (lineNumbers.indexOf(lineNumber) == -1) {
        // if no line exists create one and add the values
        lines.push({
            lineNumber: lineNumber,
            sublines : {
                afe: [],
                costCenter: [],
                orderNumber: []
            }
        });       
        
            lines[lineNumbers.length].sublines[type].push({ value: val, glCode: gl });
    }
    else {
        // if existing line
        lines[lineNumbers.indexOf(lineNumber)].sublines[type].push({ value: val, glCode: gl });
    }
});

//lines.forEach(function(el, idx, arr){
//    $('#result').append($('<div/>').text(el.lineNumber))
//});