Cant access button in behind span generated from updatepanel

I cannot appear to access a element that is within a span using jquery I am wanting to add a class to it but it appears cause my button is being added at run time via update panel which is in a span with a unique id its not finding the button. Its not updating the graphic when i click but yet its adding to the database fine and gets to my console log message fine so no its working. But not changing the colour of the font awesome icon.

I am using this to search for the button to add class i constructed.

  $(".btnRemoveFave").find('.fa-heart').css('color', '#007c7a');

The above line is not finding the button

 <script>
        $(document).ready(function () {
           $(".btnAddFave").click(function () {
               var productId = $(this).data("product-id");
                    $.ajax({
                            type: "POST",
                            url: "/dynamic/Favourite.aspx/AddToFavourites",
                            data: JSON.stringify({ 'productId': productId }),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            error: function (xhr, status, error) {
                                alert(xhr.status);
                                alert(xhr.responseText);
                            },
                            success: function (response) {
                                alert(response.d);
                                $(".btnRemoveFave").find('.fa-heart').css('color', '#007c7a');


                                console.log('do i get past here');
                            },
                            failure: function (response) {
                                alert(response.d);
                            }
                        });
                    });

                });
       </script>

This is the button in quesiton which can be 20 on a page of this button with various ids.

<span id="ctl00_BodyContentHolder_lblfavourite-xxxx"><button class="btnAddFave" id="btnAddFave_xxxx" type="button" value="Add To Favourites" data-product-id="xxxx" data-customer-id="xxxx"><i class="fa fa-heart" style="color: rgb(0, 124, 122);"></i> </button></span>

XXXX is just our product codes which i hide for security.

Edit 2
To clear up some confusion in my OG the font awesome icon is nested within my button tag as a element as was only way I could get the icon to show as the following.

Basically each product will have this button favourite and its that that I need to be able to change its font awesome icon colour based on successful completion

Your search logic isnt working because $(“.btnRemoveFave”).find(‘.fa-heart’) will return an array if there are more then one button with class ‘fa-heart’.

SO to assign any value you should iterate this array as shown below.

$.each($(".btnAddFave").find('.fa-heart'),function()
{
$(this).css('color', '#007c7a');
});