I'm building a web page that has information on various analyses our company can perform. How I'm trying to set it up is sections with a high level overview of each analysis and then a "More Detail" button that opens up a dialog box that contains more in-depth information.

I have this working fine if I use multiple lines of code to explicitly refer to the IDs of each button and each dialog. But when I try to make it just a few lines of code using selectors, I can't get it to work anymore.

Here's some of the HTML:

```
<div id="van_westendorp" class="solution price1">
    <h3 class="solution_header"><a href="#">Van Westendorp</a></h3>

    <div class="solution_content">
        <ul class="overview">
            <li><em>Price:</em> 
                <div class="dollar ui-state-default ui-corner-all"><img src="images/dollar.png"></div>
                <div class="dollar ui-state-default ui-corner-all"><img src="images/dollar.png"></div>
            </li>
            <li><em>Time:</em> 3-5 days</li>
            <li><em>Pros:</em></li>
                <ul>
                    <li>Easy task for the respondent.</li>
                    <li>Prices can be open-ended.</li>
                </ul>
            <li><em>Cons:</em></li>
                <ul>
                    <li>Deliverables imply more precision than actually exists.</li>
                    <li>Heavy reliance on respondents' understanding of questions.</li>
                </ul>
        </ul>

        <div id="van_westendorp_link" class="center">
            <button class="ui-state-default ui-corner-all detail">More Details</button>
        </div>

        <div id="van_westendorp_window" class="dialog" title="Van Westendorp Details">
            <h2 class="center">How It Works</h2>
            <ul>
                <li>Things happen.</li>
                <li>It's awesome.</li>
            </ul>
            <h2 class="center">Why It Works</h2>
            <ul>
                <li>Science!</li>
            </ul>
        </div>
    </div>
</div>

```

The div with the ID "van\_westendorp\_link" is the button and the div with the ID "van\_westendorp\_window" is the dialog window that should open.

And here's the latest iteration of what I've tried for the Javascript:

```
$("[id$='link']").click(function(){
    $(this).next("[id$='window']").dialog('open');
    event.preventDefault();
});

```

The first line of code works; if I replace the second line with an explicit reference to the dialog box ID then everything works fine. It's this second line where I try to reference the dialog box using selectors that is messing me up.

I'm using query UI for the dialog box code, if that matters at all. Any ideas why I'm unable to reference the dialog box correctly?