Button:

<button type=submit id=status class=button value=True><span>followed</span></button>

jQuery:

<script>

$(.button).toggle(function() {

    $(this).val('followed');

}, function(){

    $(this).val('follow');

});

</script>

When the user clicks the button I want it to toggle to the other value. But right now when I run the code the button just disappears from the page! What's wrong with this code?

Edit:
Thanks for the help.
Here is the entire updated jQuery:

<script>

$(document).ready(function(){

    $(.button).click(function() {

        var status = $(#status).val();

        var course = $(#course).html()



        //NEW SECTION that I'm having trouble with

        if ($(.button span).html() == followed) {

            $(.button).on(mouseover, function () {

            $(.button span).html() = unfollow;

}}



        $.ajax({

            type: POST,

            url: /follow,

            data: 'status=' + status + &course= + course,

            success: function() {

$(.button span).html($(.button span).html() == 'followed' ? 'follow' : 'followed');

$(.button).val($(.button).val() == 'True' ? 'False' : 'True');

}

        });

        return false;

    });

});

</script>

The onclick works. I then added the new onmouseover code to change followed to unfollowed, and when I run it I get

405 Method Not Allowed



The method POST is not allowed for this resource.

What's wrong with the onmouseover code?

Also, what is the function of

return false;

?