jQuery dialog + ajax - Form data duplicate at the 2nd submission, weird behavior?

I am using MVC 3 with jquery dialog n $.ajax.

I got 1 View (Index.cshtml) with a "Generate button" and script as below:

    // Once generate is clicked, call GenerateList action
    $('#generate').click(function () {
        $.ajax({
            async: false,
            url: '/Shop/GenerateList',
            type: 'GET',
            success: function (result) { getShopListFood(result); }
        });
    });

The getShopListFood is simply a controller action that return a partial view:

   // Function to generate shopListFood items based on shopListID
    public ActionResult GetShopListFood(int shopListID)
    {
        var shopListFood = (from f in dbEntities.SHOPLISTFOODs where f.ShopListID == shopListID select f).ToList();
        return PartialView("_ShopList", shopListFood);
    }

Then at the partial view, I create a dialog to load another partial view, which is the Form to create a new db instance: var $createdialog = $('').load('/Shop/GetShopListFoodForm').dialog({ autoOpen: false, title: 'Add New Item', modal: true });

    $createdialog.dialog("option", "buttons", {
        "Cancel": function () {
            $createdialog.dialog('close');

        },
        "Submit": function () {

            var frm = $('#formData');
            $.ajax({
                async: false,
                url: '/Shop/AddItem',
                type: 'POST',
                data: frm.serialize(),
                success: function (result) {
                    $('.shoplistfood').html(result);
                    $createdialog.dialog('close');
                }
            });

        }
    });

    $('#additem').button().click(function () {
        // Once clicked, create a dialog to load _ShopListFoodForm dialog
        //clear();
        $createdialog.dialog('open');

    });

However, I get a very weird situation. The 2nd create will just have the data duplicate as the 1st one. For example, I create ADD1 and submit, the shoplist updated, then I input ADD2 in the form dialog and submit, I get another ADD1 POST to the action instead of ADD2.

I had been using some method for many other module in my app but never meet such problem. I just don't know what is going wrong!

Hope I made myself clear about the problem, and can get some kind help here...

Really appreciate that..............

I somehow "solve" it by change the flow. I turn the ShopList into a View, and everytime user add item / delete item, i will refresh the div with another _ShopList partial view.

    $createdialog.dialog("option", "buttons", {
        "Cancel": function () {

            $createdialog.dialog('close');

        },
        "Submit": function () {

            var frm = $('#shopform');
            $.ajax({
                url: '/Shop/AddItem',
                type: 'POST',
                data: frm.serialize(),
                success: function (result) {
                    $('#shopfoods').html(result);
                    $createdialog.dialog('close');
                }
            });

        }
    });

This works, although I am not really sure why is it. Just to share my way and hope get some feedback here... Thanks!!