The problem is that you are initializing the jquery ui widget modal twice on the same div with id #div1
. To summarize, this is what you are doing:
$(#div1)
.dialog({...})
.dialog({...});
Of course when you then call $(#div1).dialog('open')
, the modal will open according to the 2nd initialization, that is to say a modal with the 3 buttons "Save Changes", "Delete" and "Cancel".
You must either use 2 differents divs (simpliest way) or use only one div and manage the modal content on modal open (cleanest way).
I wrote this jsFiddle to illusrate the 2nd way ;)