Inserting a List Element into an Ordered List

Inserting a List Element into an Ordered List

Hello all, first time poster here, new to jQuery.

I'm working on a project that requires dynamic manipulation of an ordered list -- adding and removing elements in response to the user pressing buttons.  I've run in to some odd behavior.  Here's my code:

HTML
  1. <ol id="track-list">
  2.       <li>Static Content Here</li>
  3. </ol>
  4. <input type="button" id="add-track" value="Add Track" />


jQuery:
  1. $("#add-track").click(function(){
  2.       var listEl = $("<li>Dynamic Content Here</li>");
  3.       listEl.hide();

  4.       $("#track-list").append(listEl);
  5.       listEl.fadeIn();

  6. } );

Looks pretty straightforward, problem is when I add the new list element it does not prepend it with any number (being part of an ordered list).  Now if I remove the hide and fadeIn lines (just append it), it inserts it correctly with a number before it, but I want this to look pretty being jQuery and all...

Any pointers on what I'm doing wrong?  Is there a smarter way to go about this seemingly simple task?