jQuery event doesnt work on html form in javascript

You can't bind event handlers directly on elements that don't (yet) exist. Probably the simplest change to fix this is to create all the forms up front in your document ready handler rather than creating them one at a time in the ".replyLink" click handler. Note that currently every time your click handler is called it recreates the form by setting the parent "#form-to-..." element's html, regardless of whether it already existed.

$(document).ready(function(){
   // create the forms up front
   $('[id^="form-to-"]').html(htmlForm());

   $(".replyLink").click(function(){
       $("#form-to-"+this.id).toggle(500); // don't set html here, just toggle
       return false;
   });

   function htmlForm(){
    /* your existing function body here */
   }

   $(".comment-form input,.comment-form textarea").focus(function(){
      /* your existing CSS setting code here */
   });
});

If for some reason that doesn't fit with how you want to do things I can think of three other ways to get around this problem:

1. Bind the focus event within your ".replyLink" click handler, after it creates the form elements.

2. Use delegated event handling, i.e., use .delegate() or .on() (or .live() if you have a really old version of jQuery) instead of .focus() to attach the event handler to a parent element that does exist. This will then automatically apply to elements added later.

3. Don't create the form element dynamically. Have the form in your initial html markup and .hide() or .show() it when required.