problem with my drop down login box?
<p>i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed 
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem</p>

<p>JS code</p>

<pre><code>// Login Form

$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.removeAttr('href');
    button.mouseup(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.mouseup(function() { 
        return false;
    });
    $(this).mouseup(function(login) {
        if(!($(login.target).parent('#loginButton').length &gt; 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});
</code></pre>

<p>html code</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;title&gt;jQuery Dropdown Login Freebie | The Finished Box&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/style.css" /&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"&gt;&lt;/script&gt;
    &lt;script src="js/login.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="bar"&gt;
        &lt;div id="container"&gt;
            &lt;!-- Login Starts Here --&gt;
            &lt;div id="loginContainer"&gt;
                &lt;a href="#" id="loginButton"&gt;&lt;span&gt;Login&lt;/span&gt;&lt;em&gt;&lt;/em&gt;&lt;/a&gt;
                &lt;div style="clear:both"&gt;&lt;/div&gt;
                &lt;div id="loginBox"&gt;                
                    &lt;form id="loginForm"&gt;
                        &lt;fieldset id="body"&gt;
                            &lt;fieldset&gt;
                                &lt;label for="email"&gt;Email Address&lt;/label&gt;
                                &lt;input type="text" name="email" id="email" /&gt;
                            &lt;/fieldset&gt;
                            &lt;fieldset&gt;
                                &lt;label for="password"&gt;Password&lt;/label&gt;
                                &lt;input type="password" name="password" id="password" /&gt;
                            &lt;/fieldset&gt;
                            &lt;input type="submit" id="login" value="Sign in" /&gt;
                            &lt;label for="checkbox"&gt;&lt;input type="checkbox" id="checkbox" /&gt;Remember me&lt;/label&gt;
                        &lt;/fieldset&gt;
                        &lt;span&gt;&lt;a href="#"&gt;Forgot your password?&lt;/a&gt;&lt;/span&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Login Ends Here --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
