title: Simple Prototype.js code to select multiple elements with the same classname
body: <p>I have one link with an id of "link", and I use the javascript below to open that link up in a modalbox:</p>
  
  <pre><code>#In my template I have: 
  &lt;a href="some/path" id="link"&gt;link&lt;/a&gt;
  
  
  #Then in my application.js file I have:
  document.observe('dom:loaded', function() {
      $('link').observe('click', function(event) {
          event.stop();
          Modalbox.show(this.href,{title: 'some title', width: 500});            
      });
  })
  </code></pre>
  
  <p>Since id's must be unique, this javascript only works for one element per page so I use it to observe my login-link and it has served me well. Until now.</p>
  
  <p>I want to use the same javascript to observe multiple links which have classnames instead of id's as below:</p>
  
  <pre><code>&lt;a href="link/to/some/stuff" class="link"&gt;link 1&lt;/a&gt;
  &lt;a href="link/to/some/other/stuff" class="link"&gt;link 2&lt;/a&gt;
  </code></pre>
  
  <p>When I do this, I can't get any of the links to open in a modalbox.  If I change the class to an id for each link, then I can get the first link in the list to open in a modalbox.</p>
  
  <p>I've tried to use the '$$' notation to build an array of links in my javascript (shown below) but if I do that, then none of the links open correctly</p>
  
  <pre><code>    #document.observe method removed for display purposes
      $$('link').observe('click', function(event) {
          event.stop();
          Modalbox.show(this.href,{title: 'some title', width: 500} );
      });
  </code></pre>
  
  <p>My javascript skills obviously suck.<br>
  Does anyone know how to fix the problem?</p>