Jquery ajax data

Question

I am using the qTip plugin to post a imdb URL to an IMDB grabber script and display movie info on that url.

Everything works until I have more than one qtip on the page.

What i need to do Is only post the data of the image that is being hovered. This is the code should make a bit more sense then me.

Script -

var link = $("#link").val();
var imdbLink =  { "link" : link };  // note change to data...

$('.moviebox').each(function() {
    $(this).qtip({
       style: { name: 'light' },
       content: {
         method: 'GET',
         data: imdbLink,   // you could make this { "link" : link }
         url: '/bin/imdb/imdb.example.php',
         text: '<img class="throbber" src="/images/loading.gif" alt="Loading..." />'
       },  
       position: {
             corner: {
               target: 'bottomright',
              tooltip: 'bottomleft'
            }
          }
    });
    });

html--

  <div class="moviebox rounded"><a href="#">
  <img src="http://1.bp.blogspot.com/_mySxtRcQIag/S6deHcoChaI/AAAAAAAAObc/Z1Xg3aB_wkU/s200/rising_sun.jpg" />
  <form method="get" action="">
    <input type="text" name="link" id="link" style="display:none" value="http://us.imdb.com/Title?0107969"/&gt;
 </form>
  </a></div>



  <div class="moviebox rounded"><a href="#"><img src="http://2.bp.blogspot.com/_mySxtRcQIag/S6dUoGd4_TI/AAAAAAAAObM/4Mbohcy0Owo/s200/grumpy_old_men.jpg" />
   <form method="get" action="">
    <input type="text" name="link" id="link" style="display:none" value="http://us.imdb.com/Title?0107050"/&gt;
 </form>
 </a>

You will see that both inputs have the same ID which is causing an issue. how would I get around this keeping the IDs the same????

Answer 1

Simple solution is to use class instead of id. Besides that, ID are meant to be unique, shouldn't use them in more than once on the same page anyways.