jQuery function is not working in PHP once the page is refreshed

I want to "Hide" the table during the starting of page, which is working using $(document).ready(function(){$("#result").hide();}); But I also want to "show" the table once the submit button is clicked, which is not working.

This is the PHP file, as I have to add more PHP code afterwards. Same result if I change this to HTML thou.

<!DOCTYPE html>
<html lang ="en">
       <head>
              <title>  Show Specific </title>
              <meta charset = "utf-8">
              <link rel="stylesheet" type="text/css" href="css/style.css">
              <script
                     src="https://code.jquery.com/jquery-3.6.0.min.js"
                     integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
                     crossorigin="anonymous">
              </script>

              <script>
                     $(document).ready(function(){
                            $("#result").hide();
                     });
                     $(document).ready(function(){
                            $("#button").click(function(){
                                   $("#result").show();//result
                            });
                     });
              </script>
       </head>
       <body>   
    
            <hr>
              
            <div id="appointment">
                <form>
                    Test ID: <input type="text" name="testID" /> <br><br>
                    First Name : <input type="text" name="First_Name" /> <br><br>
                    Last Name : <input type="text" name="Last_Name" /> <br><br>
                    <input id="submit" type="button" value="Submit" ><br><br>
                </form>
            </div>
                
            <div id="result">
                <table>
                    <tr> 
                    <th>Test ID</th>
                    </tr>

                    <tr>
                    <th>First Name </th>
                    </tr>

                    <tr>
                    <th>Last Name</th>
                    </tr>
                </table>
            </div>
                        
            <hr>

            <div id="footer">
                <footer>   Copyright &copy; ALL RIGHTS ARE RESERVED. </footer>
            </div>

       </body>
</html>

Solution

If you look carefully, the id of your input button is submit not button as you have written on your jQuery event handler.

Change your script to this one:

<script>
$(document).ready(function(){
     $("#result").hide();
     $("#submit").click(function(){
        $("#result").show();//result
     });
});
</script>

Also: it is not necessary for you to have two $(document).ready() methods. Just implement one, and then add your function inside.