JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://php.scripts.psu.edu/rja171/widgets/rating.css">

<div id="rate2" class="rating">&nbsp;</div>

JavaScript

jQuery.fn.rating = function(url, options) {
    
    if(url == null) return;
    
    var settings = {
        url       : url, // post changes to 
        maxvalue  : 5,   // max number of stars
        curvalue  : 0    // number of selected stars
    };
    
    if(options) {
       jQuery.extend(settings, options);
    };
   jQuery.extend(settings, {cancel: (settings.maxvalue > 1) ? true : false});
   
   
   var container = jQuery(this);
    
    jQuery.extend(container, {
            averageRating: settings.curvalue,
            url: settings.url
        });

    for(var i= 0; i <= settings.maxvalue ; i++){
        var size = i
        if (i == 0) {
            if(settings.cancel == true){
                 var div = '<div class="cancel"><a href="#0" title="Cancel Rating">Cancel Rating</a></div>';
                 container.append(div);
            }
        } 
        else {
             var div = '<div class="star"><a href="#'+i+'" title="Give it '+i+'/'+size+'">'+i+'</a></div>';
             container.append(div);

        }
 
        

    }
    
    var stars = jQuery(container).children('.star');
    var cancel = jQuery(container).children('.cancel');
    
    stars
            .mouseover(function(){
                event.drain();
                event.fill(this);
            })
            .mouseout(function(){
                event.drain();
                event.reset();
            })
            .focus(function(){
                event.drain();
                event.fill(this)
            })
            .blur(function(){
                event.drain();
                event.reset();
            });

    stars.click(function(){
        if(settings.cancel == true){
            settings.curvalue = stars.index(this) + 1;
            jQuery.post(container.url, {
                "rating": jQuery(this).children('a')[0].href.split('#')[1] 
            });
            return false;
        }
        else if(settings.maxvalue == 1){
           ...