More than one DIV

More than one DIV

I'm having troubles with a div tag. I want the second tag to show an alert when I hover it - but it's not happening. Any ideas?

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function()
{
   $("body").append('<div id="divOne">A</div>');
   
   $("#divOne").mouseover(function()
   {
      $("#divTwo").remove();
      $("body").append('<div id="divTwo">B</div>');
   });
   $("#divTwo").mouseover(function()
   {
      alert("alert!");
   });
});
</script>

<style type="text/css">
body { height:750px; width:1000px; }
#divTwo,   #divOne { width:100px; height:50px; background-color:#fc0; position:absolute; top:30px; left:30px; cursor:pointer; }
         #divTwo { left:150px; }
</style>