JSFiddle - React, Tailwind, and code Playground

HTML

<span id="puntaje" style="display:none">0</span>
<span id="promedio">0</span>
<ul id="puntines">
    <li title="Calificar con 1 estrella">1</li>
    <li title="Calificar con 2 estrellas">2</li>
    <li title="Calificar con 3 estrellas">3</li>
    <li title="Calificar con 4 estrellas">4</li><li title="Calificar con 5 estrellas">5</li>
</ul>

JavaScript

var puntines= document.getElementById('puntines');
    var lis= puntines.getElementsByTagName('li');
    
    var click=0;
    var numero=0;
    var promedio=0.0;
    var total= document.getElementById('puntaje');
    var span2= document.getElementById('promedio');
    var textoSpan = document.createTextNode(promedio);
    for(var j=0; j<lis.length; j++){
    
        lis[j].onclick=function(){
        
        click = click + 1;
        
        console.log('clicks'+click+'   '+parseInt(this.innerHTML));
        promedio=(parseFloat(total.innerHTML)+parseInt(this.innerHTML))/click;
        promedio = Math.round(promedio * 100) / 100;
        
        textoSpan = document.createTextNode(promedio);
        total.innerHTML=parseInt(total.innerHTML)+parseInt(this.innerHTML);
        span2.innerHTML='';
        span2.appendChild(textoSpan); 
    
    }
}