best way of creating many instances of my fancybox and form

<a href="#login_form" class="the_form">click to Contact</a>

The form:

<div style="display:none">
 <form id="login_form" method="post" action="">
  <p id="login_error">Please, enter data</p>
  <p>
   <div class="name_label">Name:</div>
   <input class="styled name" type="text" id="name" name="name" size="30" />
  </p>
  <p>
   <div class="email_label">eMail:</div>
   <input class="styled email" type="text" id="email" name="email" size="30" />
  开发者_JS百科</p>
  <p>
   <div class="note_label">Message:</div>
    <textarea id="msg" name="msg" class="light_box_msg"></textarea>
  </p>
  <p>
   <input type="submit" value="Login" />
   <input type="hidden" value="<?php echo $vantage_array[$i][10]; ?>" id="occupancy_contact_email"/>
  </p>
  <p class="lightbox_close"><a href="javascript:;" onclick="$.fancybox.close();">close</a></p>
 </form>
</div>

The javascript:

$(".the_form").fancybox({
    'scrolling'     : 'no',
    'overlayOpacity': 0.1,
    'showCloseButton'   : false,
    'onClosed'      : function() {
        $("#login_error").hide();
    }
});

$("#login_form").bind("submit", function() {

    if ($("#name").val().length < 1 || $("#email").val().length < 1 || $("#msg").val().length < 1)  {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }
});

This code works great one I only have one link,one form, and one Fancybox, but I need to have multiple instances and have it properly send its values through ajax.

What I've done is, in my database while loop, created a form for each link/entry. I guess that is where I'm messing up.

Will I have to loop through both php and the javascript to create unique id names like

#login_form_1 and #name_1, #msg_1 etc... 

For each input element?

You should not have more than one element on the page that has the same id, but in this case, the duplicate ids and names for the form fields should be ok as long as any of the elements that you want to find with jquery have either a unique id or you simply find them by their class or some other combination of class and location in the DOM.

So this code

$("#login_form").bind("submit", function() {

    if ($("#name").val().length < 1 || $("#email").val().length < 1 || $("#msg").val().length < 1)  {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }
});

will probably become something more like this

$(".login_form").bind("submit", function() {

    if ($(this).find(".name").val().length < 1 || $(this).find(".email").val().length < 1 || $(this).find(".msg").val().length < 1)  {
        $(this).find(".login_error").show();
        $.fancybox.resize();
        return false;
    }
});

And of course those items that I've changed to reference by class instead of ID should also be updated as needed.