Question: I have the following HTML:

```
<div class="row">
<div class="fourcol "> <a class="getNote" id="1" href="#">Create a Skybox</a> </div>
<div class="fourcol "> <a class="getNote" id="2" href="#">Add images to sky box</a> </div>
<div class="fourcol last"> <a class="getNote" id="3" href="#">Delete a sky box</a> </div>
<div class="row">
    <div class="twelvecol noteDetails"></div>
</div>
<div class="fourcol "> <a class="getNote" id="4" href="#">Change a skybox</a> </div>
<div class="fourcol "> <a class="getNote" id="5" href="#">Cool a skybox</a> </div>
<div class="fourcol last"> <a class="getNote" id="6" href="#">Hey a skybox</a> </div>
<div class="row">
    <div class="twelvecol noteDetails"></div>
</div>
<div class="fourcol "> <a class="getNote" id="7" href="#">one more</a> </div>
<div class="row">
    <div class="twelvecol">
        <div class="noteDetails"></div>
    </div>
</div>

```

How do I select the first div with noteDetails class?

I have tried:

```
$('#1').closest("div.noteDetails").html('test');

```

but it doesn't work.

Edit: What I really want to do is for example if I click on the link with id 4 then I want to update the closest .noteDetails (which in this case is the second .noteDetails)

Answer: 
Are you trying to do:

```
$("div.noteDetails").first()

```
Try this:

```
$("#1").next(".noteDetails").html("test");

```