Problem with for loop and jquery [SOLVED]

Problem with for loop and jquery [SOLVED]

Hi I have a problem with the code below, specifically the for loop at the bottom. The object that is iterated in the for loop behaves as I would expect until it hits jquery and then "key" is always the final one (with regards to page rendering).

Actually it's probably easier if I post everything, then you can run it.

I'm stumped. I'd be really grateful for any help you can offer me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<style type="text/css">
<!--

-->
</style>
  <script type="text/javascript" src="jquery.js"></script>
  <script >
 
   //Regular expressions
   var regs=new Array();
   regs['num']      =/^[0-9]+$/;
   regs['alpha']   =/^[a-zA-Z]+$/;
   regs['alphanum']=/^[a-zA-Z0-9]+$/;
   regs['required']=/^.+$/;
   regs['tick']   =/^1$/;

   //form elements
   var required={
   '#name1':regs['alpha'],
   '#name2':regs['alphanum'],
   '#num':regs['num']};

   
   function isNumeric(x,RegExp,dom) {
      if(x.match(RegExp)){
         dom.css("border","thin solid blue");
      }
      else{
         dom.css("border","thin solid red");

      }
   }

   $(function() {      
      for(key in required){

//Behaves as I would expect #name1 #name2' then finally '#num'
      
alert(key);

//Here's the problem... Key always seems to be the FINAL key #num
      
         $(key).blur(function(){ isNumeric($(key).val(),required,$(key))}) ;
         $(key).load(function(){ isNumeric($(key).val(),required,$(key))}) ;
      }
   });
 
  </script>

</head>

<body>
<p><input id="name1"  type="text" name="">
<p><input id="name2"  type="text" name="">
<p><input id="num"  type="text" name="">

  <script>
 
 
 
</script>
</body>
</html>