title: Javascript multiple boxes design
body: <p>I am writing a script using jQuery to add multiple control boxes(divs) to a web page. These divs contain controls (anchors) like close, prev, next, search etc. A code sample:</p>
  
  <pre><code>$div_overlay = 
      $('&lt;div&gt;&lt;/div&gt;')
      .addClass('overlay')
      .append($('&lt;div&gt;&lt;/div&gt;')
          .addClass('text_controls')
  //The onClick method below works perfect but not .click() of jQuery(due to the way 'index' is used)
          .append($('&lt;a onClick="overlay_hide('+index+'); return false;"&gt;&lt;/a&gt;')
              .addClass('close')
              .attr('href','#')
              /*.click(function(){
  //The 'index' gets incremented as divs are created and hence a wrong value(the last one) is passed irrespective of the div clicked 
              overlay_hide(index)
              })*/
          )
  </code></pre>
  
  <p>'index' is a global var to keep track of the 'overlay' divs created.
  It is incremented as the divs are created and each div is pushed in an array as it is created. So, 'index' is basically the array index of a div.</p>
  
  <p>To keep it simple, I only added the 'close' anchor. The <code>$div_overlay</code> is in a function which is called every time an image is clicked.</p>
  
  <p>My problem is to handle the click events for the anchors like 'close'. I would like to identify the div for which the anchor is clicked using an 'index' which is a global var.</p>
  
  <p>I would like to be able to pass a reference to the div on which the close action is performed. If I use the jQuery click method which is commented in above code to close the div, it passes the last index value as the parameter to <code>overlay_hide()</code> (since index is incremented as the divs are created). If I use the onClick method as above, it works fine by passing the correct index value. </p>
  
  <p>So, how do I identify these divs using indexes and be able to uniquely access them based on which div control is clicked? (Probably objects need to be used but I am not sure.) </p>
  
  <p>One way would be to get the parent of the clicked anchor but I do not want to do it that way and would like to use an index.</p>