i am trying to create a rating component but no matter what i do, the icons click is not getting registered. So if i console.log on click, it shows nothing.
hover is working fine.. i dont get where the issue is?
what am i doing wrong?

the fontawesome stylesheet has been imported in header.

blade file

@extends('frontend.layouts.master')

@section('title', 'Feedback')


@section('content')
<!-- page header  -->
<div class="page-header">
    <div class="container-fluid">
        <div class="page-title">
          Feedback Time!
        </div>
    </div>
    <img src="{{asset('frontend/assets/images/Group%20910.png')}}" alt="">
</div>

<!-- Feedback Form -->
<div class="feedback-form">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <form action="" method="post">
                    @csrf
                    <div class="form-group">
                        <div class="rating-box">
                            <h3>How was your experience?</h3>
                            <div class="stars">
                                <i id="star1" class="fa fa-star"></i>
                                <i id="star2" class="fa fa-star"></i>
                                <i id="star3" class="fa fa-star"></i>
                                <i id="star4" class="fa fa-star"></i>
                                <i id="star5" class="fa fa-star"></i>
                            </div>
                          </div>
                    </div>

                    <div class="form-group">
                        <label for="feedback">Additional Feedback</label>
                        <textarea class="form-control" name="feedback" id="feedback" rows="5"></textarea>
                    </div>

                    <button type="submit" class="btn btn-primary">Submit Feedback</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('frontend/assets/js/jquery.min.js')}}" ></script>
<script src="{{asset('frontend/assets/js/bootstrap.bundle.min.js')}}" ></script>
<script src="{{asset('frontend/assets/js/owl.carousel.min.js')}}"></script>
<script src="{{asset('frontend/assets/js/wow.min.js')}}"></script>
<script src="{{asset('frontend/assets/js/main.js')}}"></script>
<script>
$('.fa fa-star').click(function(){
    var i = $(this).index();
    console.log('click')
    $('.checked').removeClass('checked');
    $('.fa-star:lt('+(i+1)+')').addClass('checked');
});
  </script>
@endpush

style

.rating-box {
    padding: 25px 50px;
    background-color: #f1f1f1;
    border-radius: 25px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
  }
  .rating-box h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
  }
.rating-box .stars {
    display: flex;
    align-items: center;
    gap: 25px;
  }
  .stars i {
    font-size: 35px;
    color: #b5b8b1;
    transition: all 0.2s;
    cursor: pointer;
  }
  .stars i:hover {
    color: #0077b5;
  }
  .stars i.active {
    color: #ffb851;
    transform: scale(1.2);
  }

You missed a dot and you don't put a space between the classes, if the two classes should be for the same element.

So change this:

$('.fa fa-star')

To this:

$('.fa.fa-star')