title: How can I save a jQuery object in my array for a later use?
body: <p>I have some icons that the user is picking with his mouse.</p>
  
  <p>I have this series of icons where I can select and set their border. I am limiting the number of chosen icons to 5. The first selected would become a yellow border one. The next 4 would be black border. </p>
  
  <p>On document.ready, I do:</p>
  
  <blockquote>
    <p>$('img.selectable').click(function(){
        image_click(this); });</p>
  </blockquote>
  
  <p>For the CSS:</p>
  
  <pre><code>.selectable {
      border: 3px solid #ebe6b3;
      float:left;
      margin:1px;
  }
  </code></pre>
  
  <p>For the HTML:</p>
  
  <pre><code>&lt;img class="selectable" src="img/first_icon.png"&gt;
  </code></pre>
  
  <p>I have this function:</p>
  
  <pre><code>function image_click(e)
  {
      if($(e).data("clicked")=="yes")
      {
          images_selected--;
          $(e).data("clicked","no").css('border','3px solid ' + NEUTRAL_COLOR);
          if(images_selected==1)
          {
            $('img.selectable').not( e ).filter(function() {
                      return $( this ).data("clicked")=="yes";
                       }).css('border','3px solid ' + YELLOW_COLOR);
  
          }
      }
      else
      {
          if (images_selected&lt;5)
          {
              images_selected++;
              if(images_selected==1)
              {
                  $(e).data("clicked","yes").css('border','3px solid ' YELLOW_COLOR);
              }
              else
              {
                  $(e).data("clicked","yes").css('border','3px solid ' + BLACK_COLOR);
              }
          }
      }
  };
  </code></pre>
  
  <p>There has to be a <strong>first icon</strong>, which will be yellow all the time. I was thinking of doing it with an order array, which stores the order of the objects.
  The thing is I didn't seem to be able to call an object from the array and still preserve it's css function.</p>
  
  <p>I was thinking of something like:</p>
  
  <pre><code>var x=[];
  </code></pre>
  
  <p>inside <code>image_click(e){..</code></p>
  
  <p>at some point I store the object:</p>
  
  <pre><code>    $(e).data("order",clicked_img);
  
      x[clicked_img]=e;
  </code></pre>
  
  <p>and when I pop it out:</p>
  
  <pre><code>    alert(x[clicked_img].data("order"));
  ...}
  </code></pre>
  
  <p>BUT....
  Seems like I have no acces to the data anymore. Like when the object left the jQuery realm it has lost it's civil rights. I don't know how to access it's data variables.</p>
  
  <p>Help please!
  Thanks!</p>