<style>
.wrapper{
width: 300px;
display: flex;
justify-content: space-between;
margin: 100px auto;
}
.wrapper>div{
font-size: 80px;
}
</style>
<body>
<div class="wrapper">
<div class="heart" onclick = "test(0)">♥</div>
<div class="heart" onclick = "test(1)">♥</div>
<div class="heart" onclick = "test(2)">♥</div>
<div class="heart" onclick = 'test(3)'>♥</div>
<div class="heart" onclick = 'test(4)'>♥</div>
</div>
<script>
let _heart = document.querySelectorAll('.heart');
function test(num){
for (let i = 0; i < _heart.length; i++) {
if(i<=num){
_heart[i].style.color = 'red';
}else{
_heart[i].style.color = 'black';
}
}
}
</script>
</body>