Question

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();

});

Answer 1

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);
}