Hide, load, and show div with javascript

I have a few pages from each other to interact with page with id load, as below:

inside process.html

<div id="guest_details"> </div>

<div id="first_start"> </div>
<script>
<! -
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
$('#guest_details').hide('slow');
$('#first_start').SlideUp('slow')
->
</Script>

Code (markup):

inside guest_details.html

<form action="guest_details.php" <form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="$('#guest').submit();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>

</Form>

Code (markup):

That I want is when the submit button is clicked then:

1. data sent to guest_details.php
2. If the data has been sent then hide <div id="guest_details"> </div>
3. showing the <div id="first_start"> </div>

but when I make it like the above, that not work, Could someone give a clue how to correct?

Thanks a lot

 

Removing the extra form tag might help.
<form action="guest_details.php" <form method="POST" id="guest">

 

Hi Cash Nebula, Many Thanks for the corrections,

I will complete that code, hope someone can help me and I would appreciate it.

Here the complete code:

I have a few pages from each other to interact with page with id load, as below:

inside of page process.html as follows

    <form action="<?php echo $send; ?>" method="post" id="choose">//data send to process.php and redirect back to ?p=process (process.html page)
    <!--some options here -->
    <a onclick="$('#choose').submit();" class="button"> <span> <?php echo $button_next;?> </span></a>
    </form>
    
    <?php //if ($this->options->hasChosed()) { ?>
    <div id="guest_details"> </div>
    <?php //} ?>
    
    <?php if (isset($this->session->data['guest'])) { ?>
    <div id="first_start"> </div>
    <?php } ?>
    
    <script type="text/javascript">
    <!--
    $('#guest_details').load('?p=guest_details');
    $('#first_start').load('?p=first_start');
    $('#guest_details').hide('slow');
    $('#first_start').show('slow')
    -->
    </Script>

PHP:

inside of page guest_details.html as follows

    <form action="<?php echo $send; ?>" method="POST" id="guest">//data send to guest_details.php and redirect back to ?p=process (process.html page)
    <!-- Some cell here -->
    <a onclick="$('#guest').submit();" class="button" id="first_start"> <span> <?php echo $button_next;?> </span></a>
    </Form>

PHP:

inside of page first_start.html as follows

    <form action="<?php echo $send; ?>" method="POST" id="_start">/data send to first_start.php and redirect back to ?p=process (process.html page)
    <!-- Some cell here -->
    <a href="<?php echo str_replace($edit_guest_details); ?>" class="button"> <span> <?php echo $edit_guest;?> </span></a>
    <a onclick="$('#_start').submit();" class="button" id="f_start"> <span> <?php echo $button_next;?> </span></a>
    </Form>

PHP:

situations:

page guest_details.html and first_start.html load inside process.html with using

load('?p=guest_details')

Code (markup):

and

 load('?p=first_start')

Code (markup):

by default guest_details.html is showing and first_start.html is hiding

Goals:
when guest_details.html form submited by click

<a onclick="$('#guest').submit();" class="button" id="first_start"> <span> <?php echo $button_next;?> </span></a>

PHP:

then hide the page guest_details.html and show first_start.html

now at first_start.htm page

guest_details.html should be hide even so page refresh(f5), but

when button

<a href="<?php echo $edit_guest_details; ?>" class="button"> <span> <?php echo $edit_guest;?> </span></a>

PHP:

clicked then guest_details.html show again

Looking for some pointers, Thanks in Advance