jquery - My inputs don't show as expected -

i have code should:

1. generate ten <input>s - done
2. hide except first 3 - done
3. show next input when changed in last visible one. part doesn't work!

how can fix it?

for (var = 0; < 10; ++i) {      if (i == 0) {          $('#tags').append('<input name="group_interests[]" class="group_interests" type="text" />');      } else {          $('#tags').append('<input name="group_interests[]" class="group_interests default_text" type="text" value="start typing see list" />');      }  }  $('#tags .group_interests:gt(2)').hide();  $('#tags .group_interests:visible').last().focus( function() {      $(this).next().show();  }); 

your focus bound same input. try instead:

for (var = 0; < 10; ++i) {     if (i == 0) {         $('#tags').append('<input name="group_interests[]" class="group_interests" type="text" />');     } else {         $('#tags').append('<input name="group_interests[]" class="group_interests default_text" type="text" value="start typing see list" />');     } }  $('#tags .group_interests:gt(2)').hide();  $('#tags .group_interests:visible').last().focus(shownext);  function shownext() {     $(this).unbind('focus').next().show().focus(shownext); }