Need input to be appended on blur()

Need input to be appended on blur()

EDIT: I noticed that every time I do blur() on the first input it generates new ones, this needs to be limited to once per input.

Hi there!

Have a page where the user should be able to enter as much information as they want into inputs but I don't want the page to be filled with infinite numbers of them.

So I did this:
<ul>
     <li class="myLi"><input type="text" name="option[]"></li>
</ul>

Then I added this:
$(document).ready(function(){
     $("li.myLi input").blur(function() {
          $("li.myLi").append('<li class="myLi"><input type="text" name="option[1]"></li>');
     });
});


Now you see this works, once. As I want it the appended input should react the same way when you do blur() on it.
So that this can generate a new input for ever.

Hope that someone can help me with that.


-----
Then to the next problem but the same stuff.
If someone can solve the problem I posted I also need this in the function.
The first input created will look like this:
<input type="text" name="option[1]">

And I want the next one to look like this:
<input type="text" name="option[2]">


So that the number increses every new input it creates.

Hope that someone can solve both my problems because I'm new to javascript but really want to learn this