jQuery: How to assign the right ID to a button dynamically
<p>I have a JS/jQuery script that adds our leads (web contacts) to the DOM in a for loop.  Everything works fine except for one thing.  I want the body of the lead to be hidden upon the initial display, and then have a slideToggle button to display or hide the details  That means dynamically adding click events to each button as it is created.  The entire HTML (HTML and a JSON object mixed into the HTML) of the lead and the slideToggle button are all appended to a node in the DOM in the for loop.  Here is the pertinent part of the for loop:</p>

<pre><code>// Hide the body of the lead; just show the title bar and the first line
var dataID = data[i].id
var div = $('#row' + dataID);
var more = $('#more' + dataID);

div.hide();

// Create click event for each "+" button
more.click(function() {
     div.slideToggle();
});
</code></pre>

<p>But when I click on the "+" button to reveal the details, it opens the last div, not the div I am trying to open.  This is true no matter how many leads I have on the page.  How do I get the click event to open the right div.  If I console.log "div" in the click event, it gives me the ID of the last div, not the one I am clicking on.  But if I console.log(div) outside the click event, it has the right ID.</p>

<p>Also, I was unsure whether I needed the "vars" in the loop or if I should declare them outside the loop.</p>

<p>Here is the HTML.  It's one lead plus the beginning of the next lead, which I left closed in Firebug</p>

<pre><code>&lt;div id="lead1115"&gt;
&lt;div id="learnmore"&gt;
&lt;a id="more1115" class="more" href="#"&gt;+&lt;/a&gt;
&lt;/div&gt;
&lt;div id="lead-info"&gt;
&lt;div id="leadID"&gt;Lead ID# Date: March 27, 2012 11:26 AM (Arizona time)&lt;/div&gt;
&lt;div id="company"&gt;No company given&lt;/div&gt;
&lt;div id="name"&gt;Meaghan Dee&lt;/div&gt;
&lt;div id="email"&gt;
&lt;a href="mailto:meaghan.dee@gmail.com"&gt;meaghan.dee@gmail.com&lt;/a&gt;
&lt;/div&gt;
&lt;br class="clearall"&gt;
&lt;div&gt;
&lt;div id="row1115" style="display: none;"&gt;
&lt;div id="phone"&gt;No phone given&lt;/div&gt;
&lt;div id="source"&gt;www.ulsinc.com/misc/expert-contact/&lt;/div&gt;
&lt;div id="cp-name"&gt;No channel partner chosen&lt;/div&gt;
&lt;br class="clearall"&gt;
&lt;div id="location"&gt;
No location given
&lt;br&gt;
&lt;strong&gt;IP Address:&lt;/strong&gt;
198.82.10.87
&lt;br&gt;
&lt;span&gt;Approximate Location: Blacksburg, Virginia, United States&lt;/span&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;div id="details"&gt;
&lt;strong&gt;Questions/Comments&lt;/strong&gt;
&lt;br&gt;
We have the Professional Series Universal Laser Systems (laser cutter), and I wondered how I would order a high power density 2.0 replacement lens.nnThank you
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="learnmore"&gt;
&lt;a id="1115|send_message" class="verify" href="#"&gt;Verify&lt;/a&gt;
&lt;a id="1115|send_message" class="markAsSpam" href="#"&gt;Spam&lt;/a&gt;
&lt;a id="1115|send_message" class="markAsDuplicate" href="#"&gt;Duplicate&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br class="clearall"&gt;
&lt;div id="lead1116"&gt;
&lt;br class="clearall"&gt;
</code></pre>
