I have been looking into a problem, but I can't figure out how to solve it or what the solution is. I am working on my website using infinityfree as a free user. I am creating a simple review page where the user can type and then rate it with stars. The reviews get submitted to my database, and the text is correct, but the number of stars doesn't get added to ($_POST["ratedIndex"]).

When I have tried to echo the variable ratedIndex it is empty. It seems that it doesn't send through Ajax as intended, and I can't figure out why. The alert doesn't trigger, but the clicks on the stars register on the network panel in the chrome inspect element. Hopefully, I haven't been a complete dumbass and missed something essential as I am new to creating websites, and any help is very apprenticed.

gameInfo.php:

<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST"){
        require_once 'DBConnect.php';

        $game;
        $user;
        $review;
        $userid;
        $ratedIndex;
    
        $stmt = $conn->prepare("INSERT INTO reviews(game, user, userid, review, indexStar) VALUES (?,?,?,?,?)");
        $stmt->bind_param("sssss",$game, $user, $userid, $review, $ratedIndex);
        $userid = $_SESSION["userid"];
        $game = $gameTitle;
        $user = $_SESSION["username"];
        $review = $_POST["uploadReview"];
        $ratedIndex = ($_POST["ratedIndex"]);

        $stmt->execute();
    }
?>

<?php
        $id = $_SESSION["userid"];
        $gamename = $gameTitle;
        $rowzero ="0";
        $sql_ifreviewexist ="SELECT * FROM reviews WHERE reviews.game=?";
        $exist = $conn->prepare($sql_ifreviewexist);
        $exist->bind_param('s', $gamename);
        $exist->execute();
        $res = $exist->get_result();
        $reviewexist_row = mysqli_num_rows($res);
if((isset($_SESSION["username"])) && ($reviewexist_row==$rowzero)) {
         echo ' <div id="noreviewsExists">
                <div class="instructions"><p>Write a review for '.$gamename.'</p></div>
                <form id="reviewForm" method="POST" action="">
                <textarea type="text" id="reviewTextarea" name="uploadReview"></textarea>
                <div class="reviewStars">
                <i class="fa fa-star" data-index="0"></i> 
                <i class="fa fa-star" data-index="1"></i> 
                <i class="fa fa-star" data-index="2"></i> 
                <i class="fa fa-star" data-index="3"></i> 
                <i class="fa fa-star" data-index="4"></i> 
                </div>
                <div id="submitReview">
                    <button id="submitButton" type="submit" form="reviewForm">Submit</button>
                </div>
            </form>
            </div>';
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var ratedIndex = -1;
    $(document).ready(function () {
        resetStarColors();

        $('.fa-star').on('click', function (){
            ratedIndex = parseInt($(this).data('index'));
            $.ajax({
                url: "gameInfo.php",
                method: "POST",
                dataType: 'json',
                data: {
                    ratedIndex: ratedIndex
                }, success: function (data){
                    alert("ok");
                }

            });
        });

        $('.fa-star').mouseover(function () {
            resetStarColors();

            var currentIndex = parseInt($(this).data('index'));
            setStars(currentIndex);
        });

        $('.fa-star').mouseleave(function () {
            resetStarColors();

            if(ratedIndex != -1)
                setStars(ratedIndex);
        });

    });
    
    function setStars(max) {
        for (var i=0; i <=max; i++)
                $('.fa-star:eq('+i+')').css('color', 'yellow');
    }

    function resetStarColors() {
        $('.fa-star').css('color', 'black');
    }

</script> 

Edit:

After some insight from ADyson I have done something like this:

 $test = $_POST["ratedIndex"];
if((isset($_SESSION["username"])) && ($reviewexist_row==$rowzero)) {
echo '<div>'.$test.'</div>';
...}

when I click on the stars, it comes up in the network panel under preview

So now I am even more puzzled as to why it doesn't work when I try to insert it into the table.