function onLoadPopulate() {
    var grid = $("#grid0");
    var numberOfRecords = grid.getGridParam("records");
    var dataFromGrid = grid.jqGrid('getGridParam', 'data');
    var count=0;
    var link;
    if(numberOfRecords>0){
    numberOfRecords=endNo;
    count=begNo-1;  
    }
    for ( ; count < numberOfRecords; count++) {

        var program = dataFromGrid[count].program;
        var programVal="";
        
     var programs = program.replace(/\s/g,'').split(',');
        
     for ( var i = 0; i< programs.length;i++) {
            
            if (programs[i] == "FS") {
                if (programVal == "") {
                    programVal = 'DOG';
                } else {
                    programVal = programVal.concat(",DOG");
                }
            } else if (programs[i]  == "TF") {
                console.log("in TF");
                if (programVal == "") {
                    programVal = 'CAT';
                } else {
                    programVal = programVal.concat(",CAT");
                }
        
        }
        grid.jqGrid('setCell', count + 1, 'program',
                programVal);
        }
}

TEST DATA:

program = FS, TF

result i'm getting : DOG but the result i need : DOG,CAT

When it is doing else if Even if programs[i] = TF it is skipping if loop inside.

Can anyone help with this JavaScript function? I can't figure it out what is wrong.