Jquery ajax – CSS apply in ajax success response

I want to apply the following CSS in ajax success response for status Actually I am creating wishlist heart icon color changes based on click and remove. I apply color CSS but now I want to add the following CSS.Code is not working due to overwrite of css color.
if status == 2 apply following CSS:

.remove {
  background-position: -1680px 0;
  transition: background 1s steps(7);
  animation: remove-from-wishlist 1s steps(7);
}
@keyframes remove-from-wishlist {
  0% {
    background-position: -1320px 0;
  }
  100% {
    background-position: -1680px 0;
  }
}

If status == 3 apply following CSS:

.add {
  animation: add-to-wishlist 1s steps(22);
  background-position: -1320px 0;
  transition: background 1s steps(22);
}
@keyframes remove-from-wishlist {
  0% {
    background-position: -1320px 0;
  }
  100% {
    background-position: -1680px 0;
  }
}

Blade file

  <?php 
                      if (Session::has('userid')) 
                      {
                      $userid=Session::get('userid');
                      }
                      $checklist=DB::select('select * from wishlist where user_id=? && product_id=?',[$userid,$value->sub_id]);
                      if($checklist)
                      {
                      ?>
                      <a class="sub" data-id="{{$value->sub_id}}" href="#"><i class="fa fa-heart whishstate" style="float:right;color:#FBA842"></i></a>
                     <?php }
                       else
                       {
                      ?>
                       <a class="sub" data-id="{{$value->sub_id}}" href="#"><i class="fa fa-heart whishstate" style="float:right;color:grey"></i></a>
                       <?php
                        }

                       ?>

Script:

<script type="text/javascript">
  $(document).ready(function(){
  $('.sub').click(function(e) { 

    var sub_id=$(this).attr('data-id');
    var input=$(this).prev();
    e.preventDefault()
               $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
         jQuery.ajax({

                  url: "{{ url('/add-to-wishlist') }}",
                  method: 'get',
                  data: {
                     sub_id: sub_id,
                  },
                  success: function(result){
                    if(result.status==1)
                    {
                       window.location.href="/login";
                    }
                    else if(result.status==2)
                     {
                        $('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"grey"});
                     }
                     else if(result.status==3)
                     {
                        $('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"#FBA842"});
                     }
                  }});

  });
 });

</script>