raty | : star2 : Raty - A Star Rating Plugin | Frontend Framework library

I have successfully implemented the Raty star rating in my ASP.NET Core app but I am having one issue that I can’t seem to resolve.

I am using the lib for a dual purpose (see Sample image of Raty usage):

1. to show a read-only ‘Total’ rating for an entity (i.e. an Artist in the image above), and
2. to allow each user to set/edit their own rating for each artist.

The data is stored in the DB and the Artist ‘Total’ rating is retrieved when the main record is retrieved. When the logged in user clicks on the ‘Total’ rating (the 5 stars on top), a bootstrap toast popup displays, retrieves the user specific rating for that artist via AJAX, and displays their last saved rating (if any). Everything works great, including saving their rating in DB if they change it and click the ‘Update’ button.

BUT... what I can’t seem to figure out is how to update the ‘Total’ Artist rating (stars on the top). The second AJAX call (when user clicks the ‘Update’ button) updates the DB and returns the newly computed ‘Artist ‘Total’ rating, but when I try to reset the stars on top to correctly display the new Artist ‘Total’ rating, nothing happens.

The funny thing is: I can use $('.userRating').data('raty').score(RatingUserVal); to reset the original user rating (when the user displays the popup, changes their rating, does NOT click update, and instead clicks the ‘X’ to close the popup). So if they click the ‘Total’ rating again, I simply reset the user rating via $('.userRating').data('raty').score(RatingUserVal); and that works great.

But when I try to do the same for the ‘Total’ rating, it doesn’t work??

Below is some relevent code so maybe someone can point me to what I’m doing wrong. This is on page load for the ‘Total’ Artist rating: