unable to open jquery ui dialog for second time

I have two jquery ui dialog's which opens only once. here is the fiddle http://jsfiddle.net/santosh_patnala/2fMqp/2/

html:

<div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case One </b>

    <br />
    <button class="Share">Share</button>
    <div id="test" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Elgifto 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">Share</button>
    <div id="test" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>

jquery:

$(".Share").click(function (e) {

$(this).next(".testCase").dialog();

})

Please help me out of this

Solution

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");
});