Dynamically changing button data-icon in NavBar?

[Joon]

Following is my header for a view and what I want to achieve is to when I click on the 'but_add_to_favorites' button, the button changes its data-icon (initially set to 'favorites'), say, to 'trash'. 


<div data-role="view" id="business_info" data-title="Business" data-show="BusinessInfo_Init" data-layout="mainLayout">
        <header data-role="header">
            <div data-role="navbar" id="business_navbar">
                <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                <span data-role="view-title">Business</span>
                <a id="btn_add_to_favorites" data-role="button" data-align="right" data-icon="favorites" onclick="favorites_clicked()"></a>
            </div>
        </header>
....
....

function favorites_clicked() {
            alert('hm');
            $("#btn_add_to_favorites").attr("data-icon", "trash");

as it shown me the 'hm' alert, this fires ok but nothing happens with my attempt to change the data-icon attribute to 'trash'.

Any guidance would be much appreciated.

Thanks,

John C