// obtain all spans from DOM

const spans = document.querySelectorAll('span');

// set a variable at global scope as indicator

let flag = false; 



// add event listener to each span

spans.forEach((sp, j)=>{

    sp.addEventListener('click', ()=>{

    // if clicked, then not dismissing the background colour after mouse leave

    flag = true;

    // reassign all spans back to original grey

    spans.forEach(dsp=>{

        dsp.style.backgroundColor = '#eee';

    });

    // assign bg to red of the spans from 0 to clicked index

    Array.from(new Array(j+1), (x, i) => i).forEach(ind=>{

        spans[ind].style.backgroundColor = 'red';

    });

  });

    // redo if mouse enters

    sp.addEventListener('mouseenter', ()=>{

    flag = false;

  });

    // if any span is hovered

    sp.addEventListener('mouseover', ()=>{

    // reassign all spans back to original grey

    spans.forEach(dsp=>{

        dsp.style.backgroundColor = '#eee';

    });

    // assign bg to red of the spans from 0 to clicked index

    Array.from(new Array(j+1), (x, i) => i).forEach(ind=>{

        spans[ind].style.backgroundColor = 'red';

    });

  });

  // in moseleave, only save the background colour if click happened

  sp.addEventListener('mouseleave', ()=>{

    if(!flag){

      spans.forEach(dsp=>{

        dsp.style.backgroundColor = '#eee';

      });

    }

  });

});

span {

  display:inline-block;

  width: 32px;

  height: 32px;

  background-color:#eee;

}



span:hover {

  background-color:red;

  opacity: 0.8;

  cursor: pointer;

}

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>