JSFiddle - React, Tailwind, and code Playground

by imparator

HTML

<div class="form-group">                            
                            <label for="cfdaNumber">CFDA Number</label>
                            <table class="table" id="tblCfda">
                                  <thead>
                                    <tr>
                                      <th class="col-sm-2">Number</th>
                                      <th class="col-sm-2">Percentage</th>
                                      <th class="col-sm-4">Award Number / Description</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr class="trCfda">
                                      <td>
                                          <div class="input-group">                                                                              
                                              <input class="form-control cfdaNr" id="cfda1" name="nr1" placeholder="CFDA #1">
                                          </div>
                                      </td>
                                      <td>
                                          <div class="input-group">                                                                              
                                              <input class="form-control percentage" id="percentage1" name="percentage1">
                                              <span class="input-group-addon">%</span>
                                          </div>
                                      </td>
                                      <td>
                                          <div class="input-group">                                
                                              <input type="text" class="form-control" id="award1" name="award1">
                                          </div>
                                      </td>                                       
                   ...

JavaScript

function validateCfda() {
    var valid = true;
    var skip = false;
    var totalPercentage = 0;
    
    $('.trCfda').each( function (i, row) {
        
        var $row = $(row),
            $cfda = $row.find('input[name*="nr"]'),
            $percentage = $row.find('input[name*="percentage"]'),
            $award = $row.find('input[name*="award"]');
            
        var rsum = 0;
        rsum += $percentage.val() ? 1 : 0;
        rsum += $cfda.val() ? 1 : 0;
        rsum += $award.val() ? 1 : 0;
        
        if (skip && rsum == 3) {
            alert('It seems like you have skipped a line');
            valid = false;
            return false;            
        }
        
        
        if (rsum != 0 && rsum != 3) {
            valid = false;
            alert('neither 0 nor 3');
            return false;
        } else if (rsum == 0) {
            skip = true;
        }
        
        if ($percentage.val()) totalPercentage += Number($percentage.val());
    });
    
    if (!valid) return valid;
    
    $('.trRest').each( function (i, row) {
        
        var $row = $(row),            
            $percentage = $row.find('input[name*="Percentage"]'),
            $award = $row.find('input[name*="Award"]');
        
        var rsum = 0;
        rsum += $percentage.val() ? 1 : 0;        
        rsum += $award.val() ? 1 : 0;
        
        if (rsum != 0 && rsum != 2) {
            valid = false;
            alert('neither 0 nor 2');
            return false;
        }
        
        if ($percentage.val()) totalPercentage += Number($percentage.val());
    });
    
    if (totalPercentage != 100) valid = false;
    
    alert('Outside of .each loop() | valid: ' + valid);
    return valid;    
}