ui dialog - inputs dissapear on second open

ui dialog - inputs dissapear on second open

i posted this earlier, but it disappeared from the forum (irony)...

below code doesn't work when the dialog is opened from the link second time

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <link href="App_Themes/Default2/custom-theme/jquery-ui-1.8.5.custom.css" type="text/css"
        rel="stylesheet" />
    <script type="text/javascript" src='js/jquery-1.4.2.min.js'></script>
    <script type="text/javascript" src='js/jquery-ui-1.8.5.custom.min.js'></script>
    <script type="text/javascript">


        $(function () {

            $('#dlgSendToFriend').dialog({
                autoOpen: false,
                width: 650,
                height: 180,
                show: 'slide',
                hide: 'scale',
                resizable: false
            });
            $('#dlgSendToFriend').parent().appendTo($("form:first"));


        });


        function showSendToFriend() {

            $("#dlgSendToFriend").dialog("open");
        }

   
    </script>
    <a href="javascript:showSendToFriend();">test me</a>
    <form action="dialog_submit.php" method="post" id="dialog_submit" name="dialog_submit">
    <div id="dlgSendToFriend" title="Send To Friend">
        <div>
            Your Name:
        </div>
        <div>
            <input type="text" name="test" />
        </div>
        <div>
            Your Friend's Name:
        </div>
        <div>
            <input type="text" name="test2" />
            <input type="button" name="dialog_sbumit" value="Submit" />
        </div>
    </div>
    </form>
</body>
</html>