JQuery Event Listeners in a For Loop
<p>I am trying to create some basic button rollover functionality using Jquery and toggleClass. I am building a list of elements by cloning a DIV from my HTML and duplicating it multiple times (its populating a list of data from a database). To do this I am using a for loop. Here is the currently working code.</p>

<pre><code>            var displayNode = document.getElementById('phoneDisplayContainer');         
        for(var i=0; i&lt;length; i++) {
            //Clone the original container display.
            var clonedDisplay = displayNode.cloneNode(true);
            clonedDisplay.setAttribute('id', 'phoneDisplayContainer' + i);
            //Remove hidden class from cloned Element. NOT CROSS BROWSER!
            clonedDisplay.classList.remove('hidden');

            var children = clonedDisplay.getElementsByTagName('div');
            //Fill new nodes children containers with data.
            children[1].innerHTML = contact.phone[i].type;
            children[2].innerHTML = contact.phone[i].number;
            children[3].setAttribute('onclick', 'PhoneUtility.edit(' + i + ');');
            children[3].setAttribute('id', 'phoneEditDisplay' + i);
            children[4].setAttribute('onclick', 'PhoneUtility.remove(' + i + ');');

            //Hidden elements
            var hidden = new Array(children[3], children[4]);

            //Set rollover events.
            clonedDisplay.setAttribute('onmouseover', '$("#' + children[3].id + '").toggleClass("hidden");');
            clonedDisplay.setAttribute('onmouseout', '$("#' + children[3].id + '").toggleClass("hidden");');

            //Append the new node to the display container
            phoneContainer.appendChild(clonedDisplay);
        }
    }
</code></pre>

<p>Is there a way to use Jquery event listeners instead of having to set onmouseover and onmouseout directly on the element?</p>

<p>I tried this:</p>

<pre><code>$(clonedDisplay).mouseover(function() {
    $(children[3]).toggleClass('hidden');
});
</code></pre>

<p>With no luck. It just displays performs the rollover effect on the last element in the list. This is actually my first attempt at using jQuery so any other suggestions to ways I could jQuery inside the code would be helpful too.</p>

<p>EDIT: I'd also like to toggle multiple children from the arraylist mentioned in the for loop. How would I set this up? I can't seem to pass an array to the jquery command without getting errors.</p>
