working with append to create details
<p>i'm trying to create details for each <code>div</code> that i have in a list.</p>

<p>just to now, this list can be very long.</p>

<p>so, this is what i have done so far:</p>

<p>examp:</p>

<p>html:</p>

<pre><code>&lt;div class='pics'&gt;1&lt;/div&gt;
&lt;div class='pics'&gt;2&lt;/div&gt;
&lt;div class='pics'&gt;3&lt;/div&gt;
&lt;div class='pics'&gt;4&lt;/div&gt;
&lt;div class='pics'&gt;5&lt;/div&gt;
&lt;div class='pics'&gt;6&lt;/div&gt;
</code></pre>

<p>js:</p>

<pre><code>$("div.pics").live("mouseover", function(){
    var $this = $(this);
    var details = "&lt;div id='details' style='border: solid red 1px; width: 300px; height: 300px; position: absolute;'&gt;Detalhes do usuario&lt;/div&gt;";
    $this.next().append(details);
});

$("div.pics").live("mouseout", function(){
    if($("#details").length){
        $("#details").remove();
    }
}); 
</code></pre>

<p><a href="http://jsfiddle.net/9HBsh/10/" rel="nofollow"><strong>Made a live example</strong></a> </p>

<p>i have some question now, this is the better way to something like that?</p>

<p>and its not working the append with the last <code>div</code> i think its because the <code>next()</code>, how can i fix that ?</p>

<p>i'm kinda lost here.</p>

<p>Thanjs!</p>
