I am new to ajax and i am trying to store ratings for some songs i have on my website with a star rating system with the select tag but everytime i click on a specific star to rate the song it does nothing.The connection with the database is working and i guess there is something wrong in the javascript code below because if i enter the rating in the database manually with INSERT it does appear in the website

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/jquery-bar-rating-master/dist/jquery.barrating.min.js"></script>
<!-- Invoke star rating -->
<script type="text/javascript">
   $(document).ready(function(){
        $('#star_rating_<?php echo $song_id; ?>').barrating('set',<?php echo $rating; ?>);
    });
    $(function () {
        $('.rating').barrating({
            theme: 'fontawesome-stars',
            onSelect: function (value, text, event) {
                
                var el = this;
                var el_id = el.$elem.data('id');
                console.log(el_id);
                
                
                if (typeof (event) !== 'undefined') {
                    var split_id = el_id.split("_");
                    console.log(split_id);
                    var song_id = split_id[1];
                    console.log(song_id);
                    $.ajax({
                        url: 'ajax_star_rating.php',
                        type: 'post',
                        data: {
                            song_id: song_id,
                            rating: value
                        },
                        dataType: 'json',
                        success: function (data) {
                            var average = data['numRating'];
                            $('#numeric_rating_' + song_id).text(average);
                        }
                    });
                }
            }
        });
    });
</script>