Value of text box sticks in jQuery modal box

See more:

Javascript

jQuery

Hi Guys

I'm quite new to the world of Javascript and jQuery, so I'm hoping this is a simple fix...

I have an MVC app. In this app I have a partial view that gets populated when a selection is made in a table above it.

The user needs to be able to add a note to a record, so there is a button that opens a jQuery dialog box.

<div id="dialog-notes" style="display:none;" title="Additional Notes">
     @Html.TextAreaFor(x => x.AdditionalNotes, new { id = "txtNotes" })
     @Html.HiddenFor(x => x.AdditionalNotes)
</div>

When the user enters some text and clicks OK, an action is called to save the info.

<script>
function dialog(dialogBox) {
                $(dialogBox).dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            };

            function dialog_notes() {
                $('#dialog-notes').dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            var message = $('#txtNotes').val();
                            var jobID = $('#JobID').val();

                            $.ajax({
                                type: "POST",
                                url: "/Agents/SaveAditionalNotes",
                                data: { jobID: jobID, notes: message },
                                success: function (result) {
                                    dialog('#dialog-notesSaved');
                                },
                                error: function (req, status, error) {
                                    dialog('#dialog-notesSavedFailed');
                                }
                            });
                            $(this).dialog("close");

                        }
                    }
                });
            };
</script> 

Action code for fun:

public ActionResult SaveAditionalNotes(int jobID, string notes)
       {
           Listings list = new Listings();

           return Json(list.SaveAdditionalNotes(jobID, notes));
       }

Now, this works fine first time round. However, if I make another selection in the grid, open up the modal dialog again, type something new and click OK, the result from the textbox of the first time is sent???

Example: First time the value is "Sausages". Second time I type the value "Mashed Potato". The value "Sausages" will be sent instead of "Mashed Potato"...

This has be very confused... Is this normal behavior? How do I stop this?

Thank you in advance.