Help needed - Updating div.innerHTML from textbox contents onKeyUp

Help needed - Updating div.innerHTML from textbox contents onKeyUp

Hi all,
 
I'm new to jQuery and was wondering if anyone could help me on this problem i have???
 
I want to update the inner HTML of a div from the contents of a textbox once the user has typed in a letter. I have done it in javascript but want to convert it to jQuery.
 
Here is what I have done.
 
<!DOCTYPE html>
<html>
<head> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
  <script> 
  $(document).ready(function() {
 $("imagepreview").draggable({ containment: '#dragcontainer' });    
 $("text1preview").draggable({ containment: '#dragcontainer' });
 $("text2preview").draggable({ containment: '#dragcontainer' });
 $("text3preview").draggable({ containment: '#dragcontainer' });   
  }); 
  </script>
 <SCRIPT TYPE="text/javascript">
 <!--
 function copyText(e)
 {    
  document.getElementById( e.name + 'preview' ).innerHTML = e.value;
 }
 //-->
 </SCRIPT>
  <link href="custDesMod_style.css" rel="stylesheet" type="text/css">
</head>
<body>






















<div id="head"></div>
<div id="main">
  <div id="custDesMod">
  <div id="menu">
   <div id="text">Text <input name="text1" type="text" onKeyUp="copyText(this)"></div>
   <div id="text">Text <input name="text2" type="text" onKeyUp="copyText(this)"></div>
   <div id="text">Text <input name="text3" type="text" onKeyUp="copyText(this)"></div>  
   <div id="imgUpload">    
    <FORM encType="multipart/form-data" method="post" action="my_upload.php"> 
    Photo<br>  
     <INPUT size="30" type="file" name="image"><br> 
     <INPUT value="Upload" type="submit" name="upload"> 
    </FORM>     
   </div>       
  </div>
    <div id="container">   
   <img class="containerBgImg" src="products/blank_mug_left.jpg">  
   <div id="dragcontainer">
      <div id="image1preview" class="Drag">img1</div>     
      <div id="text1preview" class="Drag">tb1</div>    
      <div id="text2preview" class="Drag">tb2</div>
      <div id="text3preview" class="Drag">tb3</div>              
   </div>  
  </div>
  </div>
</div>
</body>
</html>


























 
 
Here is the style sheet custDesMod_style.css
 
#main{
 width: 550px;
}
#custDesMod {
}
#menu {
 float: left;
}
#imgUpload{
}
#container {
 width: 240px;
 height: 240px;
 position: relative;
 float: right;
 border-color: #999999;
 border-style: solid;
 border-width: 1px;
}
.containerImg {
 position:absolute;
 left:0px;
 top:0px;
 z-index:-1; 
}
#dragcontainer {
 width: 130px;
 height: 165px;
 position: relative;
 float: right;
 right: 25px;
 top: 30px;
}
.Drag {
 width: 100%;
 cursor: move;
}
#image1preview {
 width:auto;
 background-color: silver;
 z-index: 1;
 position: absolute;
} 
#text1preview {
   width: auto;
 padding: 0 0 0 0;
 background-color: #00FFFF;
 z-index: 2;
 position: absolute;
} 
#text2preview {
   width: auto;
 padding: 0 0 0 0;
 background-color: #CCFF00;
 z-index: 3;
 position: absolute;
} 
#text3preview {
   width: auto;
 padding: 0 0 0 0;
 background-color: #FF99FF;
 z-index: 4;
 position: absolute;
} 






























































 
My idea is to be able to click a text box and take the name it and pass it to the function to concat with string 'preview' to get the name of the div I want to update.
 
And as you can tell i want to then be able to allow the user to position the div within a container.
 
Any help is welcomed!!
 
:)