javascript - JQuery reusable dialog with different content -

i'm new jquery , can't create reusable dialog box. here code

    $(function () {     $("#basedialog").dialog({         autoopen: false,         modal: true,         width: 520,         show: "blind",         hide: "explode"     });     $("#basedialogopener").click(function () {         $("#basedialog").dialog("open");         return false;     }); 

i use dialog box this:

<input id="basedialogopener" type="button" value="update" />     <div id="basedialog" title="test dialog" class="divclass">     <!-- here goes asp .net mvc 2 code -->     </div> 

the problem want reuse dialog many times in many pages different html content , have no idea how this, because can't use class attribute because of styles need use too. cant use id attrubutes same values @ same page. , there no way can use this? maybe attribute id (class reserved css)?
<input id="basedialogopener" type="button" value="update" />
<div id="basedialog" title="test dialog" class="divclass">
<form>...</form>
</div>
<input id="basedialogopener" type="button" value="update 2" />
<div id="basedialog" title="test dialog 2" class="divclass">
<form>...</form>
</div>
looking forward answes.
update: have code above executed using class attribute, dialogs appear @ once when click button. way fix this?

the dialog box can load content .htm file server when it's opened.

you can use :

$("#basedialogopener").click(function () {     $("#basedialog").load('content.htm');     return false; }); 

update: code shows how have same .click() display different contents based on button.

$("dialogbutton.").click(function () {     $("#basedialog").load($(this).data('content'));     return false; });   <input type="button" value="first" id="button1" class="dialogbutton" data-content="content1.htm" /> <input type="button" value="second" id="button2" class="dialogbutton" data-content="content2.htm" />