handling css colors with combination of codes

I have the following function setCSSColors which assigns background colors to the text displayed in a table like this:

 function setCSSColors(cellsInnerText, row, cellsIndex) {
      let x = cellsInnerText;
      if (x.includes("PET")) {
        row.cells[cellsIndex].className = "petClass";
      } else if (x.includes("VIC")) {
        row.cells[cellsIndex].className = "vicClass";
      } else if (x.includes("NED")) {
        row.cells[cellsIndex].className = "nedClass";
      } else if (x.includes("FAM")) {
        row.cells[cellsIndex].className = "famClass";
      } else if (x.includes("HEX")) {
        row.cells[cellsIndex].className = "hexClass";
      } else if (x.includes("TAMRA")) {
        row.cells[cellsIndex].className = "tamraClass";
      } else if (x.includes("Cy5")) {
        row.cells[cellsIndex].className = "cyfiveClass";
      }

  else if (x.includes("FAM/ZEN/IBFQ")) {
    row.cells[cellsIndex].className = "famComboClass";
  }

The above function is getting called from another function like this:

function colorTableCells(tableObject, pageName) {
  if (pageName === "pageOne") {
    var tables = tableObject;
    for (var j = 0; j < tables.length; j++) {
      var table = tables[j];
      for (var i = 0; i < table.rows.length; i++) {
        if (i != 0) {
          var row = table.rows[i];
          if (row.cells.length > 1) {
            var x = row.cells[1].innerText;
           setCSSColors(x, row, 1);
          }
        }
      }
    }
  } else if (pageName === "pageTwo" || pageName === "pageThree") {
    var table = tableObject;
    for (var i = 0; i < table.rows.length; i++) {
      if (i != 0) {
        var row = table.rows[i];
        if (row.cells.length > 1) {
          let x = row.cells[2].innerText;
          setCSSColors(x, row, 2);
        }
      }
    }
  }
}

Reasoning behind two if statements above:

For pageOne, I am getting the tableObject like this in my pageOne code which used getElementsByName:

var tables = document.getElementsByName("myTableInPageOne");
let pageName = "pageOne";
colorTableCells(tables,pageName)

whereas, in case of other two pages pageTwo and pageThree

I have it like this (using getElementsById) :

var tables = document.getElementsById("myTableInPageTwo");
let pageName = "pageTwo";
colorTableCells(tables,pageName)

Similarly for pageThree.

And here are my CSS colors defined:

famClass {
  background: lightblue;
}
.famComboClass {
    background: #034694;
  }

.petClass {
  background: red;
}

.nedClass {
  background: yellow;
}

.vicClass {
  background: lightgreen;
}

.hexClass {
  background: #40ff00;
}

.tamraClass {
  background: orange;
}

.cyfiveClass {
  background: pink;
}

I’m trying to apply a different color to this combo FAM/ZEN/IBFQ using famComboClass CSS but it’s still adding famClass with light blue color.
Any idea how I can apply a specific color to the above combo? famClass seems to be taking precedence over famClassCombo.