Add rating star with smily faces using html css and javascipt

// css
.rating_icn i.far{font-size:28px; cursor: pointer; margin:0px 5px;}
.rating_icn i.far.one,.rating_icn i.far.onestar{color:#f7350ad9;}
.rating_icn i.far.one,.rating_icn i.far:hover{color:#f7350ad9; transform:scale(1.3); transition: 0.3s;}


//HTML
<div class='col-md-6 col-sm-6 col-lg-4 col-xl-4 mb-3'>
    <label>Add Rating <span class='text-danger'>*</span></label>
    <!-- <input type='number'required name='add_rate' class='form-control' id='' placeholder='eg.5'/> -->
    <div class='rating_icn'>
        <i class='far 1star'>&#xf119;</i>
        <i class='far 2star'>&#xf582;</i>
        <i class='far 3star'>&#xf580;</i>
        <i class='far 4star'>&#xf57a;</i> 
        <i class='far 5star'>&#xf581;</i>
    </div>
</div>

<script>
// script for add and remove class according to that faces color should be change 

 $('.1star').click(function(){
      $('.1star').addClass('onestar');
      $('.2star').removeClass('onestar');
      $('.3star').removeClass('onestar');
      $('.4star').removeClass('onestar');
      $('.5star').removeClass('onestar');
 });

 $('.2star').click(function(){
  $('.1star').addClass('onestar');
  $('.2star').addClass('onestar');
  $('.3star').removeClass('onestar');
  $('.4star').removeClass('onestar');
  $('.5star').removeClass('onestar');
});

$('.3star').click(function(){
  $('.1star').addClass('onestar');
  $('.2star').addClass('onestar');
  $('.3star').addClass('onestar');
  $('.4star').removeClass('onestar');
  $('.5star').removeClass('onestar');
});

$('.4star').click(function(){
  $('.1star').addClass('onestar');
  $('.2star').addClass('onestar');
  $('.3star').addClass('onestar');
  $('.4star').addClass('onestar');
  $('.5star').removeClass('onestar');
});

$('.5star').click(function(){
  $('.1star').addClass('onestar');
  $('.2star').addClass('onestar');
  $('.3star').addClass('onestar');
  $('.4star').addClass('onestar');
  $('.5star').addClass('onestar');
});
</script>