JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<div class="price_rating" data-rate="">
<span data-index="1">★</span>
<span data-index="2">★</span>
<span data-index="3">★</span>
<span data-index="4">★</span>
<span data-index="5">★</span>
<input type="hidden" name="PROPERTY[484][0]" size="25" value="">
<p>Удалить потом этот абзац. Первая трока работает и запониманет кликнутые звезды</p>
</div>
<div class="convenience_rating">
<span style="font-size:200%;color: #f7c402;">★</span>
<span style="font-size:200%;color: #f7c402;">★</span>
<span style="font-size:200%;color: #f7c402;">★</span>
<span style="font-size:200%;color: #ceccc6;">★</span>
<span style="font-size:200%;color: #ceccc6;">★</span>
</div>
<div class="functionality_rating">
<span style="font-size:200%;color: #f7c402;">★</span>
<span style="font-size:200%;color: #f7c402;">★</span>
<span style="font-size:200%;color: #f7c402;">★</span>
<span style="font-size:200%;color: #f7c402;">★</span>
<span style="font-size:200%;color: #f7c402;">★</span>
</div>

CSS

div.price_rating{
cursor: default;
}
div.price_rating span{
  font-size:200%;
  color: #ceccc6;
}
div.price_rating span:hover{
  font-size:200%;
  color: #f7c402;
  cursor:pointer;
}
.price_rating[data-rate='1'] span:nth-child(-n+1){
color: #f7c402;
cursor:pointer;
}
.price_rating[data-rate='2'] span:nth-child(-n+2){
color: #f7c402;
cursor:pointer;
}
.price_rating[data-rate='3'] span:nth-child(-n+3){
color: #f7c402;
cursor:pointer;
}
.price_rating[data-rate='4'] span:nth-child(-n+4){
color: #f7c402;
cursor:pointer;
}
.price_rating[data-rate='5'] span:nth-child(-n+5){
color: #f7c402;
cursor:pointer;
}




#price-rate1 span:nth-child(-n+1){
color: #f7c402;
cursor:pointer;
}
#price-rate2 span:nth-child(-n+2){
color: #f7c402;
cursor:pointer;
}
#price-rate3 span:nth-child(-n+3){
color: #f7c402;
cursor:pointer;
}
#price-rate4 span:nth-child(-n+4){
color: #f7c402;
cursor:pointer;
}
#price-rate5 span:nth-child(-n+5){
color: #f7c402;
cursor:pointer;
}

JavaScript

$(document).ready(function () { 

$('.price_rating span:nth-child(5)').hover(
       function(){ $('.price_rating').attr('data-rate','5') },
       function(){ $('.price_rating').removeAttr('data-rate', '') }
);
$('.price_rating span:nth-child(4)').hover(
       function(){ $('.price_rating').attr('data-rate','4') },
       function(){ $('.price_rating').removeAttr('data-rate', '') }
);
$('.price_rating span:nth-child(3)').hover(
       function(){ $('.price_rating').attr('data-rate','3') },
       function(){ $('.price_rating').removeAttr('data-rate', '') }
);
$('.price_rating span:nth-child(2)').hover(
       function(){ $('.price_rating').attr('data-rate','2') },
       function(){ $('.price_rating').removeAttr('data-rate', '') }
);
$('.price_rating span:nth-child(1)').hover(
       function(){ $('.price_rating').attr('data-rate','1') },
       function(){ $('.price_rating').removeAttr('data-rate', '') }
);



$('.price_rating span:nth-child(5)').click(
       function(){
       $('.price_rating').attr('id','price-rate5')
       $('.price_rating input').val('5')
       }
);
$('.price_rating span:nth-child(4)').click(
       function(){ $('.price_rating').attr('id','price-rate4')
       $('.price_rating input').val('4')
       }
);
$('.price_rating span:nth-child(3)').click(
       function(){ $('.price_rating').attr('id','price-rate3')
       $('.price_rating input').val('3')
       }
);
$('.price_rating span:nth-child(2)').click(
       function(){ $('.price_rating').attr('id','price-rate2')
       $('.price_rating input').val('2')
       }
);
$('.price_rating span:nth-child(1)').click(
       function(){ $('.price_rating').attr('id','price-rate1')
       $('.price_rating input').val('1')
       }
);








});