Automatically Reload A Div Only For A Chat System Not Reloading

This week, I have worked on creating a chat system. I am using, PHP, Html, CSS, and Javascript. I am also using PHPMYADMIN for the database. I need the chat div to automatically reload so there can be a close to live chat! My current code looks like:

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js">
        <script language="javascript">
            $("#message_area").load(location.href+" #message_area>*","");
        </script>
        <style>
            *{margin: 0px; padding: 0px;}
            #main{border: 1px solid black; width: 450px; height: 500px; margin: 24px auto;}
            #message_area{width: 98%; padding: 0% 1%; border: 1px solid blue; height: 440px;}
        </style>
    </head>
    <body>
        <?php 
            session_start();
                    if(isset($_SESSION['user_name'])){
                        echo '<a href="logout.php">Logout!</a>';
                        echo '<center><h4>Welcome, '.$_SESSION['user_name'].'!</h4></center>';
                    }else{
                        header("location:login.php");
                    }
        ?>

        <div id="main">
            <div id="message_area">
                <?php
                            include("connection.php");
                        
                        $q1="SELECT * FROM `message`";
                        $r1= mysqli_query($con, $q1);
                            while($row = mysqli_fetch_assoc($r1)){
                                $message = $row['message'];
                                $user_name = $row['user_name'];
                                echo '<h4 style="color: red">'.$user_name.':</h4>';
                                echo '<p>'.$message.'</p>';
                                echo '<hr>';
                            }

                        if(isset($_POST['submit'])){
                            $message = $_POST['message'];

                            $q='INSERT INTO `MESSAGE` (`id`, `message`, `user_name`)
                            VALUES("", "'.$message.'", "'.$_SESSION['user_name'].'")
                            ';

                            if(mysqli_query($con, $q)){
                                echo '<h4 style="color: red;">'.$_SESSION['user_name'].':</h4>';
                                echo '<p>'.$message.'</p>';
                            }

                        }

                ?>
            </div>
            <form method="post"> 
                <input type="text" name="message" style="width:366px; height: 50px;" placeholder="Type Your Message!" />
                <input type="submit" name="submit" style="width: 70px; height: 50px;" value="Send" />
            </form>
        </div>
    </body>
</html>
I have look long and far and yet none of the solutions to this problem have worked, thanks, in advance!