How to compare html entity with JQuery

<h3 id="headerid"><span onclick="expandCollapse('headerid')">&uArr;</span>Header title</h3>

function expandCollapse(id) {
    var arrow = $("#"+id+" span").html(); // I have tried with .text() too
    if(arrow == "&dArr;") {
    $("#"+id+" span").html("&uArr;");
    } else {
    $("#"+id+" span").html("&dArr;");
    }
}

function expandCollapse(id) {
    var arrow = $("#"+id+" span").html();
    if(arrow == "u21d1") {
        $("#"+id+" span").html("u21d3");
    } else {
        $("#"+id+" span").html("u21d1");
    }
}

<div id="inplace">
<div id="myStatic">Hello World!</div>
<div id="myEdit" style="display: none">
<input id="myNewTxt" type="text" />
<input id="myOk" type="button" value="OK" />
<input id="myX" type="button" value="X" />
</div></div>

$("#myStatic").bind("click", function(){
    $("#myNewTxt").val($("#myStatic").text());
    $("#myStatic,#myEdit").toggle();
 });
 $("#myOk").click(function(){
    $("#myStatic").text($("#myNewTxt").val());
    $("#myStatic,#myEdit").toggle();
 });
 $("#myX").click(function(){
    $("#myStatic,#myEdit").toggle();
 });

<h3 id="headerId"><span class="upArrow">&uArr;</span>Header title</h3>

$( '.upArrow, .downArrow' ).click( function( span ) {
    if ( span.hasClass( 'upArrow' ) )
        span.text( "&dArr;" );
    else
        span.text( "&uArr;" );
    span.toggleClass( 'upArrow' );
    span.toggleClass( 'downArrow' );
} );