Closing log Twitter-Bootstrap closes when textareas are clicked

Hi, this is my first time creating a website with JQuery. I am using Twitter-Bootstrap for the login dropdown and I cannot get the JQuery script right to keep the window open when you click on the text area. I have tried everything and I am familiar with the java script. I posted the following:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"</script>

      

        
        
        
      

    

at the top of the header, as well as in front of the body cover bracket and also in front of the body cover body ...

<script>$(function() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});</script>

      

        
        
        
      

    

here is the HTML

<div id="top-bar">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <ul id="top-info">
                            <li>Phone: 703-518-4325</li>
                            <li>Email: <a href="mailto:info@urbanare.com">info@urbanare.com</a></li>
                        </ul>
                        <ul class="nav pull-right" id="top-buttons">
                            <li id="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a></a>
                            <div class="dropdown-menu" style="padding: 15px; padding-bottom: 15px;">

                            <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
                            email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
                            password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
                            <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                            <label class="string optional" for="user_remember_me"> Remember me</label>

                            <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
                            </form>
                            </div></li>
                            <li class="divider"></li>
                            <li><a href="../register"><i class="fa fa-pencil-square-o"></i> Register</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

      

        
        
        
      

    

and CSS

#top-bar {
  width: 100%;
  min-height: 35px;
  max-height: 35px;
  font-size: 13px;
  line-height: 35px;
  background-color: #f1f3f6;
  position: relative;
  z-index: 1020;
}

#top-buttons{ 
line-height:10px !important;
}

#top-bar a {
  color: #74777c;
}

#top-bar a:hover,
#top-bar a:focus {
  color: #f58220;
  text-decoration: none;
}

#dashboard-top-bar {
  width: 100%;
  min-height: 45px;
  font-size: 13px;
  line-height: 35px;
  background-color: #f1f3f6;
  position: relative;
  z-index: 1020;
}

#dashboard-top-bar a {
  color: #74777c;
}

#dashboard-top-bar a:hover,
#dashboard-top-bar a:focus {
  color: #f58220;
  text-decoration: none;
}
#top-info,
#top-buttons {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}
#top-info,
#top-buttons li {
 display: inline-block;
  margin-left: 25px;
}

#top-buttons {
  float: right;
}

#top-buttons .divider {
  position: relative;
  border-left: 1px solid #74777c;
  width: 1px;
  height: 22px;
  overflow: hidden;
  margin-bottom: -6px;
 }