자바스크립트로 구현했습니다.

const $stars = document.querySelector(".stars");
const $fas = document.querySelectorAll(".fa");
const $print = document.querySelector(".print")


$stars.addEventListener('click',(e)=>{
    $fas.forEach(fa=>fa.classList.remove('active'))
    e.target.classList.add('active');
   const index = [...$fas].findIndex(fa=> [...fa.classList].includes('active'));

    for(i=0; i<index;i++){
        $fas[i].classList.add('active');    }



    const $img =document.createElement("img");

    
    switch(index){
        case 0 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='별루에요';
            $print.appendChild($img);

            console.dir($img);
            break;
        case 1 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='보통';
            $print.appendChild($img);
            break;
        case 2 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='맘에 들어에요';
            $print.appendChild($img);
            console.dir($print);
            break;
        case 3 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='최고';
            $print.appendChild($img);
            break;
        case 4 :
            $img.src=`images/star-lv${index+1}.png`;
            $print.textContent='싼다.';
            $print.appendChild($img);
            break;
        case 5 :
            $print.textContent='';
            $print.removeCh
    }

    })