I am setting a required field with javascript. When I meet the conditions, it places the 'Value is required' message in the adjacent column rather than beneath it. Any idea why? How can I make it appear beneath the field being validated?

Condition NOT met:

Condition met:

Here is an example of a different field where I am using the same javascript to set the required field:

Here is my javascript for the problematic field:

  var checkCatVal = function(){//check value of individual cell and show or hide
    var totalRows = $('#q119 tr').length-1;
        
    for (var r=1; r<totalRows+1; r++){
    var catVal = $('#q119 td:nth-child(2)').closest('tr:nth-child('+r+')').find('td select').val();
    var descrCell = $('#q119 tr:nth-child('+r+') td:nth-child(3)');
    var pCardVal = $('#q119 td:nth-child(4)').closest('tr:nth-child('+r+')').find('td input').is(':checked');
    var last4Cell = $('#q119 tr:nth-child('+r+') td:nth-child(7) div input');
    
    if (pCardVal ==true){
     last4Cell.css('visibility', 'visible');
     last4Cell.attr('required', 'true');
     last4Cell.parsley().validate();
    	}
     else{
      last4Cell.css('visibility', 'hidden');
      last4Cell.removeAttr('required');
      last4Cell.parsley().validate();
    	};//else  
    if (catVal =='other' || catVal == 'fees'){
     descrCell.css('visibility', 'visible');
     descrCell.attr('required', 'true');
     descrCell.parsley().validate();
    	}
     else{
      descrCell.css('visibility', 'hidden');
      descrCell.removeAttr('required');
      descrCell.parsley().validate();
    	}//else 
    };//for
  };//checkCatVal function

^descrCell is the field in question.

Thanks!