Unable to Change Icon on Click() : <p>I have this HTML </p>

<pre><code>&lt;li&gt;&lt;button class="btn-link glyphicon @(I._tp_favourite == 0 ? "glyphicon-heart-empty" : "glyphicon-heart")" style="text-decoration:none;" onclick="Fav(@I._id, @I._tp_favourite)" id="FavButton"&gt;&lt;/button&gt;&lt;/li&gt;
</code></pre>

<p>OnClick I trigger this function</p>

<pre><code> function Fav(id,fav) {
        var url = '@Url.Action("_Fav", "my")';

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                id: id,
                fav: fav
            },
            success: function (data) {
                $('#FavButton').toggleClass('btn-link glyphicon glyphicon-remove');
                alert(data);
            },
            error: function (jqXHR) { // Http Status is not 200
                alert(jqXHR.status);
            }
        });
    };
</code></pre>

<p>This should change the button class to <code>btn-link glyphicon glyphicon-remove</code> But it is not, Do i need to attach an ID with each <code>id="FavButton"</code></p>

<p>Any Ideas</p>

<p>Cheers</p>
