conditional not working right

[loganbest]

I'm looping through a json object that was retrieved via ajax.

 

The problem I'm having is that currletter never equals firstletter yet they are the same value sometimes. I have verified that by dumping those valuse side by side in another div

$('#dump').append(i+": "+firstletter + " / " + currletter +'<br>');

 

What's going on?

 

$.each(response.data, function(i, data) {

			var restname = data.rest_name;
			if(i == 0) {
				var firstletter = restname.charAt(0);
			}
			var currletter = (!isNaN(restname.charAt(0))) ? "#" : restname.charAt(0);
			var title = (data.preferred == "Yes") ? '<a href="http://savannahmenu.com/'+ data.url +'"target="_top">'+ data.rest_name +'</a>' : '<a class="nonvip">'+ data.rest_name +'</a>';
			var img = (data.image) ? (data.preferred == "Yes") ? '<a href="../'+ data.url +'"target="_top"><img align="left" style="display:block;float:left;margin-right:5px;" src="'+ data.image +'"></a>' : '<img align="left" style="display:block;float:left;margin-right:5px;" src="'+ data.image +'">' : '';

			restcontainer += '<table border="0" cellspacing="0" cellpadding="0" width="915">';
			if(currletter == firstletter) {
				restcontainer += '<tr height="2"><td colspan="2" height="2"><div style="background: #ccc; height:2px; width:100%"></div> </td></tr>';
				$('#dump').append(i+": "+firstletter + " / " + currletter +'<br>');
			} else {
				restcontainer += '<tr><td colspan="2" height="6"></td></tr>';
				restcontainer += '<tr height="20px">';
				restcontainer += '<td bgcolor="#000000" valign="bottom" height="20px" style="padding:4px 0px 0px 0px;margin:0px"><span style="color:white;margin-top:3px;font-weight:bold;">  <a name="'+ currletter +'" style="text-decoration: none; color:#fff;">'+ currletter +'</a>  Listings</span></td>';
				restcontainer += '<td align="right" bgcolor="#000000" valign="bottom" height="20px" style="padding:4px 0px 0px 0px;margin:0px"><a href="#top" style="text-decoration:none; float:right; display:block;" target="_self"><span style="color:white;margin-top:3px;font-weight:normal;">Top </span></a></td>';
				restcontainer += '</tr>';
				restcontainer += '<tr><td colspan="2" height="6"></td></tr>';

				var firstletter = (!isNaN(restname.charAt(0))) ? "#" : restname.charAt(0);
			}
			restcontainer += '<tr height="75">';
			restcontainer += '<td width="300" valign="middle" style="padding:10px 0px;">'+ img;
			restcontainer += '<font face="Arial" size="2"><strong>'+ title +'</strong><br> '+ data.phone +'<br> '+ data.address +'<br> '+ data.city +', '+ data.state +' '+ data.zip +'</font></td><td valign="middle">';
			restcontainer += (data.single_special) ? '<div class="special singlevip">'+ data.single_special +'</div>' : '';
			restcontainer += (data.couple_special) ? '<div class="special couplesvip">'+ data.couple_special +'</div>' : '';
			restcontainer += (data.group_special) ? '<div class="special groupvip">'+ data.group_special +'</div>' : '';
			restcontainer += '</td></tr></table>';

		});