Ajax Star rating system not storing data to database

Question

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>

Request-Response Error

Warning: Undefined array key "s_id" in C:\xampp\htdocs\site\ajax_star_rating.php on line 6 4 Fatal error: Uncaught TypeError: mysqli_fetch_array(): Argument #1 ($result) must be of type mysqli_result, bool given in C:\xampp\htdocs\site\ajax_star_rating.php:13 Stack trace: #0 C:\xampp\htdocs\site\ajax_star_rating.php(13): mysqli_fetch_array(false) #1 {main} thrown in C:\xampp\htdocs\site\ajax_star_rating.php on line 13

Database Code

CREATE TABLE `songs` (
  `id` int(11) NOT NULL,
  `song_title` varchar(40) NOT NULL,
  `genre` varchar(30) NOT NULL,
  `youtubelink` varchar(512) DEFAULT NULL,
  `album` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `ratings` (
  `id` int(11) NOT NULL,
  `u_id` int(11) NOT NULL,
  `s_id` int(11) NOT NULL,
  `rating` int(2) NOT NULL,
  `date` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ajax_star_rating.php

<?php

include("registration/connection.php");

$user_id = 1;
$song_id = $_POST['s_id'];
$rating = $_POST['rating'];

// Check rating inside the table
$query = "SELECT COUNT(*) AS countSong FROM ratings WHERE s_id = " . $song_id . " and u_id = " . $user_id;
$result = mysqli_query($con, $query);
$getdata = mysqli_fetch_array($result);
$count = $getdata['countSong'];

if($count == 0){
 $insertquery = "INSERT INTO ratings(u_id, s_id, rating) values(". $user_id .", ". $song_id .", ". $rating .")";
 mysqli_query($con, $insertquery);
}else {
 $updateRating = "UPDATE ratings SET rating=" . $rating . " where u_id=" . $user_id . " and s_id=" . $song_id;
 mysqli_query($con, $updateRating);
}

// fetch rating
$query = "SELECT ROUND(AVG(rating),1) as numRating FROM ratings WHERE s_id=".$song_id;
$result = mysqli_query($con, $query) or die(mysqli_error());
$getAverage = mysqli_fetch_array($result);
$numRating = $getAverage['numRating'];
$return_arr = array("numRating"=>$numRating);

echo json_encode($return_arr);
?>