Onmousehover event followed by ajax post to generate list based on hovered element of another list

I am using php.. there is a ul element which has 4 courses as li elements.

<ul id="courseMenu">
<li class="courseTitle" id="100">Course_100</li>
<li class="courseTitle" id="101">Course_101</li>... </ul>

Now each of these courses have their own mysql table which stores chapters on them.. I have another ul which is hidden which will be generated depending on the id I am passing via get/post. or in other words I want to unhide the ul & show the chapters from the course I am currently hovering on.

<ul id="chaptMenu">
<li>Chapter_100</li>
<li>Chapter_101</li>... </ul>

I was thinking of getting the course ID via getID function when mousehover occurs.. then post that ID to the same page so that I can get the id using php request method.. something like this-

$(document).ready(function() {
 $('.courseTitle').mouseover(function() {
   var id=this.id;
   $.ajax({
     url: "index.php",
     type: "POST",
     data: {'course':id},
  });
 });
});

then later-

$crsID=$_REQUEST['course'];

& generate the list using the crsID value.