My inputs don't show as expected

I have code that should:

1. Generate ten <input>s - done
2. Hide all except first three - done
3. Show the next input when something is changed in the last visible one. This part doesn't work!

How can I fix it?

for (var i = 0; i < 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 to see the list" />');

    }

}

$('#tags .group_interests:gt(2)').hide();

$('#tags .group_interests:visible').last().focus( function() {

 开发者_运维问答   $(this).next().show();

});

Your focus is always bound to the same input. Try this instead:

for (var i = 0; i < 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 to see the list" />');
    }
}

$('#tags .group_interests:gt(2)').hide();

$('#tags .group_interests:visible').last().focus(showNext);

function showNext() {
    $(this).unbind('focus').next().show().focus(showNext);
}