JavaFX tableview with CSS scrolling issue - javafx

Question

I am currently facing a problem with javafx table. I have a tableview that shows a list of subjects. The background color of each row depends if a subject is able to be enrolled or not. Subjects with green background can be enrolled and subjects with pink background cannot be enrolled. The problem occurs when scrolling the table.
TableView before scrolling
TableView after scrolling down and up
After scrolling, the background color of rows have changed and the subjects with green background might become pink and vice versa. This works perfectly without adding a css to the table.
Code I used to set the background color of rows
tblAvailableSubjects.setRowFactory((TableView<Subject> param) -> {
TableRow<Subject> row = new TableRow<>();
row.emptyProperty().addListener((obs, wasEmpty, isEmpty) -> {
if(isEmpty) {
row.setContextMenu(null);
row.setStyle("-fx-border-color: transparent");
} else {
Subject subject = row.getItem();
if(subject.getSubjectEvaluation().equals(SubjectEvaluation.COMPLETED)) {
row.setStyle("-fx-background: #B2EBF2");
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.FAILED)) {
row.setStyle("-fx-background: #FF0000");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.OKAY)) {
row.setStyle("-fx-background: #8BC34A");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.ENROLLWITHCOREQ)) {
row.setStyle("-fx-background: #FFEB3B");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.CANTENROLL)) {
row.setStyle("-fx-background: #FFCDD2");
}
}
});
return row;
});
CSS for table
.table-view {
/* Constants used throughout the tableview. */
-fx-table-header-border-color: transparent;
-fx-table-cell-border-color: -fx-box-border;
/* Horizontal Lines*/
-fx-background-color: transparent;
}
.table-view .filler, .table-view .column-header
{
-fx-size: 40;
-fx-border-style: null;
-fx-border-color: rgb(200.0, 200.0, 200.0);
-fx-border-width: 0 0 1 0;
-fx-background-color: transparent;
}
.table-view .show-hide-columns-button
{
-fx-background-color: transparent;
}
.table-view .column-header .label,
.table-view .column-drag-header .label
{
-fx-alignment: CENTER_LEFT;
}
.table-view .column-header-background
{
-fx-background-color: transparent;
}
.table-row-cell {
-fx-cell-size: 30px;
}
.table-cell {
-fx-border-color: transparent;
-fx-border-width: 1;
}
EDIT: The subject's SubjectEvaluation value doesn't change, it seems that it switches the context menu and background color between rows when scrolling.
I hope someone could help me with this. Thanks.