Cant change font awsome icon color on success post

Cant change font awsome icon color on success post

I am trying to select a button <i> element using jquery and change its colour its a font awsome tag within a button grouping my problem is I have about 50 of these buttons on  page at one time I am using a class to find them. 
  1.                   $(".btnRemoveFave").find('.fa-heart').css('color', '#007c7a');
Now i believe why it wont find them is cause it is nested in a <i> the font awesome icon on a 
  1. <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>
I have two buttons which I render in the code behind which is a vb app and two sets of statements to take care of that When btnAddFave is click it should change the        icon to # f7296a and the other one  # 007c7a
  1. <script>
                    $(document).ready(function () {
                        $(".btnAddFave").click(function () {
                            var productId = $(this).data("product-id");
                            var thisButton = $(this);

                             $.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);
                                    $(".btnAddFave").find('.fa-heart').css('color', '#f7296a');


                                },
                                failure: function (response) {
                                    alert(response.d);
                                }
                            });
                        });

                    });
                </script>
                                  <script>  

                    $(document).ready(function () {
                        $(".btnRemoveFave").click(function () {
                            var productId = $(this).data("product-id");
                            var customerId = $(this).data("customer-id");
                               $.ajax({
                                type: "POST",
                                url: "/dynamic/Favourite.aspx/RemoveFavouriteByCustId",
                                data: JSON.stringify({ 'custId': customerId, 'productCode': 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>