JQuery append li & apply function to that element only

Question

I need to append a new list element on each carriage return and just visually check against two numbers to demo success & failure.

But each time carriage return is hit the function starts to effect the previously appended element rather than only be applied to the newly appended element.

How can I modify the code in the attached 'fiddle' so that it only applies functionality to the latest element being appended? http://jsfiddle.net/KrPaj/

    var addTray = function(tray) {
    /*
        Add the given tray to the list.

        If this tray already exists, it will be highlighted and no items
        are added.

    */
    if (!findTrayInList(tray).length) {
        $('#trays-list li.empty').detach();
       // $('input#id_tray').prop('disabled', true);
        $('#trays-list').append($('<li data-tray="'+ tray +'">'+ tray +'<span></span></li>').hide().fadeIn(1000, function(event) {
            var number1 = 1 + Math.floor(Math.random() * 2); 
            var number2 = 1 + Math.floor(Math.random() * 2);   
            console.log(number1 + ' ' + number2)
            currentTray = $(this);
            console.log(currentTray);
            currentTray.map(function(e) {

                currentTray.each(function() {

                    if(number1 === number2)
                    {
                        currentTray.addClass('green').animate({ 
                            color:"#00FF00"
                        }, 1000)
                        currentTray.delay(1000).fadeOut(300, function() {
                            currentTray.remove();
                            //$('input#id_tray').prop('disabled', false);

                        });

                    }
                    else
                    {
                        currentTray.addClass('red').animate({ color:"red" }, 1000, function() {
                            if(currentTray.children('span').is(':empty'))
                                currentTray.children('span').append(' failed');
                               // $('input#id_tray').prop('disabled', false);
                        });
                    }
                });
            }).get();

        }));
        updateHeading();
        //trayCheck();
    } else {
        findTrayInList(tray).css('color', 'red').animate({color: '#333'}, 'slow');
    }
};

Answer 1

It's a bit difficult to see what you are trying to achieve but I believe you'll just need to append the <li> before running the code. Currently you are trying to trigger several things before it's attached.

First create it, then append it, then add your fadeIn finish code:

$li = $('<li data-tray="'+ tray +'">'+ tray +'<span></span></li>').hide();

$('#trays-list').append( $li );

$li.fadeIn(1000, function(event) { /* code */ }

Hopefully this is what you wanted: http://jsfiddle.net/KrPaj/10/