This is happening because you're initialising your dialog's on first load, and on second attempt they are already initialised so we can't initialise them again.
I have got it working in this fiddle: http://jsfiddle.net/2fMqp/24/
Essentially, give your dialog <div>
's unique IDs, in this instance I've used "test1" and "test2". Add a data attribute to your share buttons so they know which <div>
they are controlling, in this example they are data-dialogId
.
<div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case One </b>
<br />
<button class="Share" data-dialogId="test1">Share</button>
<div id="test1" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case One Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case Two </b>
<br />
<button class="Share" data-dialogId="test2">Share</button>
<div id="test2" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case Two Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>
Next, we initialise the dialog's on page load, and then when the button is called, get the ID of the div we want to display, and call dialog("open")
rather than just dialog()
.
$( ".testCase" ).dialog({
autoOpen: false,
});
$(".Share").click(function (e) {
var dialogId = $(this).attr("data-dialogId");
$("#" + dialogId).dialog("open");
});