If Statement in Javascript Function Not Working as Expected

I have a HTML table with a select list. I have a function that changes the values of one of the cells based on a change in the select list.

// Chages Op on rank change
	$(".rank").change(function() {
    var $rankop = this.value; // get Rank value
    var $catrow = $(this).closest("tr");    // Find the row
    var $catop1 = $catrow.find(".catop").text(); // Find cat Op
    var $baseop = $catrow.find(".baseop").val(); // Find baseop
    var $catop = ($rankop * $baseop); // Multiply ranking x op for new op 
	   $catop =$catop.toFixed(2);    // format to 2 decimal points
		
	
	$catrow.find(".calcop").val($catop); // change value of hidden field calcop for form submit
	$catrow.find(".catop").text($catop); // change text of catop cell to new op
	
	// define rank color
    var $rankcolor;
	if ($catop1 > $catop) {
		 $rankcolor = 'red';
	}  
	
	if ($catop1 < $catop) {
	   $rankcolor = 'green';
	}
		
	$catrow.find(".rankcolor").val($rankcolor); // change value of hidden field calcop for form submit	
	alert(" The catop1 is " + $catop1 + " The catop is " + $catop + " The Rank Color is " + $rankcolor);
	
	
});	

Select allOpen in new window

Every part of this works correctly except the last part where I define a rank color. It seems to behave completely erratically. Sometimes is the correct color and sometimes it is not. The alert I put in verifies that the $catop1 and $captop values are correct, but the $rankcolor variable is often the wrong color. I'm hoping there's something simple I missed in the if statement that is causing this...