.hide() and .show() with .append()

.hide() and .show() with .append()

I am using 2 divs inside a form:
<div id=one>consists of a text field and a checkbox</div>
<div id=two>consists of another text field</div>

<div id=two> is always hidden. I am also using a button at the end to repeat (append) these 2 divs.

I want <div id=two> to show only when the checkbox in <div id=one> is checked and hide when the checkbox in <div id=one> is unchecked. The textfield and check names are array.

Is this possible?
  1.  <head>
  2.        <script type="text/javascript">
  3.              $(document).ready(function() {
  4.                    $("#addTestAppend").click(function() {
  5.                          $("#testAppend").append(
  6.                                "<div id=one>"
  7.                                      +"<input type=\"text\" name=\"name[]\" /><br />"
  8.                                      +"<input type=\"checkbox\" name=\"needDivTwo[]\" id=\"needDivTwo\" />"
  9.                                +"</div>"
  10.                                +"<div id=two>"
  11.                                      +"<input type=\"text\" name=\"age[]\" />"
  12.                                +"</div>"
  13.                          );
  14.                    });
  15.              });
  16.        </script>
  17.  </head>
  18.  <body>
  19.        <form name="name" method="post" action="">
  20.              <div id=testAppend>
  21.                    <div id=one>
  22.                          <input type="text" name="name[]" /><br />
  23.                          <input type="checkbox" name="needDivTwo[]" id="needDivTwo" />
  24.                    </div>
  25.                    <div id=two>
  26.                          <input type="text" name="age[]" />
  27.                    </div>
  28.              </div>
  29.              <input type="button" id="addTestAppend" value="[ Add Append ]"  />
  30.        </form>
  31.  </body>