Muliple JQuery UI Modals Not working

Muliple JQuery UI Modals Not working

Hi,
I have a page with two links that open two different modals, the "forgotten password" link opens the "forgotten password" modal and the "tell-a-friend" link opens the "tell-a-friend" modal.

Both modals contain forms that can be submitted.

The problem is if I open the first modal and submit it or close it, I cannot submit the second modal.
I can open the second modal, but I cannot submit it.

Please advise what the problem could be!

Here below is the javascript code that resides in separate javascript file, which is then imported into the HTML file. It is not inline javascript, if that would matter.

[code]
/* GLOBAL VARIABLE. */
var forgottenPasswordDiv;
var tellAFriendDiv;

function clearErrorMessages() {
    $('#errorMessage').text("");       
}

function openForgottenPassword() {
    forgottenPasswordDiv = $('#forgotten-password');
    $('#forgotten-password').load("/Templates/include/new/ajax/modal/forgottenPassword.jsp")
    .dialog(
        {
            autoOpen:false,
            modal:true,
            position:'left+35% top+20%',
            width:'330',
            height:'auto'
        }
    );
    $('#forgotten-password').dialog('open');
}

function closeForgottenPassword() {
    forgottenPasswordDiv.dialog("close");
}

function submitForgottenPassword() {
    clearErrorMessages();
    var email = $('#email').val();
    if (email == null || email == '') {
        $('#errorMessage').text("Please enter your user name or email");
    } else {
        clearErrorMessages();
        /* Ajax Post */
        var formData = $("#forgottenPasswordForm").serialize();
        $.ajax({
            type: "GET",
            url: "/Templates/include/new/ajax/forgottenPassword.jsp",
            data: formData,
            success: function(data) {
                if (data.error != null) {
                    $("#errorMessage").text(data.error);
                } else {                           
                    $('#forgottenPasswordForm , .info').fadeOut(1000);
                    $("#successMessage").text(data.success);       
                    $("div").removeClass('display-none');
                }
            },
            dataType: 'json'
        });
    }               
}

function openTellAFriend(gunId) {
    tellAFriendDiv = $('#tell-a-friend');
    $('#tell-a-friend').load("/Templates/include/new/ajax/modal/tellAFriend.jsp?id=" + gunId)
    .dialog(
        {
            autoOpen:false,           
            modal:true,
            position:'center top+10%',
            width:'330',
            height:'auto'
        }
    );
    $('#tell-a-friend').dialog('open');
}


function closeTellAFriend() {
    tellAFriendDiv.dialog("close");
}

function submitTellAFriend() {
    clearErrorMessages();
    var yourname = $('#yourname').val();
    var errorMessage = "";
    if (yourname == null || yourname == '') {
        errorMessage += "Please enter your name<br />";                   
    }
   
    if (errorMessage != '') {
        $('#errorMessage').html(errorMessage);
    } else {
        clearErrorMessages();
        /* Ajax Post */
        var formData = $("#tellAFriendForm").serialize();
        $.ajax({
            type: "GET",
            url: "/Templates/include/new/ajax/tellAFriend.jsp",
            data: formData,
            success: function(data) {
                if (data.error != null) {
                    $("#errorMessage").text(data.error);
                } else {
                    $("#tellAFriendForm").fadeOut(1000);                       
                    $("#successMessage").text(data.success);
                    $("div").removeClass('display-none');
                }
            },
            dataType: 'json'
        });
    }
}

[/code]