jQuery hoverIntent iteration problem with multiple li's
<p>I'm using hoverIntent to fire onMouseOver and onMouseOut events</p>

<p>it works for one of my li, actually it looks like it appends itself to only one li and as I hover other list items it displays the show() and hide() functions to the last list item.</p>

<p>here is my code:</p>

<pre><code>            &lt;script&gt;
                $(document).ready(function(){
                        var config = {
                            over: show, // function = onMouseOver callback (REQUIRED)    
                            timeout: 200, // number = milliseconds delay before onMouseOut    
                            out: hide // function = onMouseOut callback (REQUIRED)    
                        };
                    $("#ULid li").hoverIntent( config )
                    $('a.names').click(function() {
                        var id = this.id.replace('id', '');
                        $.get("dependencies/ajax/contacts.ajax.php",{
                            cmd    : "view",
                            id   : id,
                        }, function(data) {
                            $("#detailsPane").fadeIn(500).html(data);
                        });
                    });
                    $('a.delete').click(function() {
                        var id = this.id.replace('id', '');
                        $.get("dependencies/ajax/contacts.ajax.php",{
                            cmd    : "view",
                            id   : id,
                        }, function(data) {
                            $("#contact-" + id).slideUp("slow").html(data);
                        });
                    });
                });
                function show(){
                    var selector = $(this).find('.delete-div');
                    selector.fadeIn('slow');
                }
                function hide(){
                    var selector = $(this).find('.delete-div');
                    selector.fadeOut(500);
                }
            &lt;/script&gt;
            &lt;div class="toolbar"&gt;
                &lt;a href="javascript:void(0);" onclick='$("#addC").toggle();'&gt;&lt;p id="addC20" style="float: left"&gt;&lt;/p&gt;&lt;/a&gt;
                &lt;p style="float: right; position: relative; top: 0px; left: -10px;"&gt;Contact Manager&lt;/p&gt;
            &lt;/div&gt;&lt;!-- end toolbar --&gt;

            &lt;div id="contact-wrap"&gt;
                &lt;div id="groups"&gt;
                    &lt;div id="contact-search" class="search"&gt;
                        &lt;input type="text" class="input" name="search" /&gt;
                        &lt;img src="dependencies/images/header/search.png" /&gt;
                    &lt;/div&gt;&lt;!-- end search --&gt;

                    &lt;h3 id="groups-heading"&gt;Groups&lt;/h3&gt;
                    &lt;ul class="post"&gt;
                    &lt;? while($row = mysql_fetch_array($groups)) {
                        echo '&lt;li&gt;&lt;a href="#" class="groups" id="' . $row['id'] . '"&gt;' . $row['first_name'] . ', ' . $row['last_name'] . '&lt;/a&gt;&lt;/li&gt;';
                    } ?&gt;
                        &lt;li&gt;Business&lt;/li&gt;
                        &lt;li&gt;Personal&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Add group&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;&lt;!-- end post --&gt;
                &lt;/div&gt;&lt;!-- end names --&gt;

                &lt;div id="names"&gt;
                    &lt;h3 id="names-heading"&gt;Contacts&lt;/h3&gt;
                    &lt;ul class="post" id="ULid"&gt;
                    &lt;? while($row = mysql_fetch_array($contacts)) { ?&gt;
                        &lt;li id="contact-&lt;?=$row['id'];?&gt;"&gt;
                            &lt;p class="contact-image" style="float: left;"&gt;&lt;/p&gt;
                            &lt;span&gt;&lt;a href="javascript:void(0);" class="names" id="&lt;?=$row['id'];?&gt;"&gt;&lt;?=$row['first_name'];?&gt;, &lt;?=$row['last_name'];?&gt;&lt;/a&gt;&lt;/span&gt;
                            &lt;div class="delete-div" style="float: right; display: none;"&gt;
                                &lt;a href="javascript:void(0);" class="delete" id="&lt;?=$row['id'];?&gt;"&gt;
                                    &lt;p class="delete-image" style="float: left;"&gt;&lt;/p&gt;
                                &lt;/a&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                    &lt;? } ?&gt;
                    &lt;/ul&gt;&lt;!-- end post --&gt;
                &lt;/div&gt;&lt;!-- end names --&gt;

                &lt;div id="detailsPane"&gt;&lt;/div&gt;
</code></pre>

<p>If I move the script outside the while loop then it show the delete div to the first list item and only to that one as I hover over to other list items.</p>

<p>Any ideas as to why it's doing this?</p>
