关于回复留言弹出框的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function add()
{
 //包含所有文件域的DIV
 var div = document.getElementById('te');
 
 //文件域
 var input = document.createElement("textarea");
 //input.id = 'input';
 input.rows = 5 ;
 input.cols = 50 ;
 //添加
 div.appendChild(input);
 }
 
 function add1()
 {
 var div = document.getElementById('bu');
 var input = document.createElement("input");
 input.type='submit';
 input.value='发表';
  //添加
     div.appendChild(input);
 }
  function button()
  {
   document.getElementById("submit").style.display="none";
       //这里按钮隐藏起来
  }
</script>
</head>
<body>
<div style=" width:1000px;margin: 0 auto;">
  <?
  $file=array('台式机多少钱？','笔记本咋卖的？','显卡有货没？');
  foreach ($file as $kk)
     {

   ?>
  <ol style="border-bottom:#0C0 1px solid;color:#0000ff; width:980px;">
    <li style=" list-style-type:none;">
      <?=$kk?>
    </li>
  </ol>
  <ol>
    <form method="POST" enctype="multipart/form-data" action="upload.php">
      <input type="button" id="submit" onclick="add();add1();button();" value="回复"/>
      <div id="te"> </div>
      <div id="bu" style="margin-left:150px; margin-top:10px;"> </div>
    </form>
  </ol>
  <?
  
   }
   
   ?>
</div>
</body>
</html>
问题:1 点击回复都是在第一条信息下弹出回复框,怎样才能在当前信息下弹出？
     2 点击回复第二条信息,发现点错了要回复第三条信息.当点击第三条信息时原来弹出的回复框自动消失.也就是一次只能
       有一条回复框。    写得比较乱，js不太懂,都是边学边改,到这难住了,望高手指点.谢谢!