создание элемента jQuery, передача значения

$('#stuff_btn').on('click', function(event){
event.preventDefault();

$(this).remove();
$('#stuff').prepend('<div id="current_lvl">Level: 1</div>');

var words = ["arvuti","pudel","ekraan"];
var random = Math.floor(Math.random() * words.length);
var word = words[random];   
var chars = word.split('');
chars = _.shuffle(chars);

for(var i in chars)
{
    $('#word_place_grid ul').append('<li id="letter' + i + '">' +  chars[i] +  '</li>');

    $('#letter'+i).bind('click',function(){
        $(this).animate({
            opacity: 0.30,
            top: -55,
        },750,function(){    //Animation complete
            $('#game_window_grid ul').append('<li>' + chars[i] + '</li>');
            $(this).remove();
        });
    });
}

})

HTML:

    <div class="word_grid" id="game_window_grid">
    <ul>
    </ul>
</div>

<div class="word_grid" id="word_place_grid">
    <ul>
    </ul>
</div>

Поэтому я стараюсь взять слово из списка случайно. Перемешайте буквы. Поместите каждую букву в отдельный li в diС#word_place_grid. Затем я хочу добавить обработчик кликов в каждый div, который будет анимировать этот li, и в конце анимации я хотел бы добавить значение анимированного li в новый элемент li, который я добавляю к div #game_window_grid. Проблема в том, что с кодом jQuery, который у меня есть сейчас, он добавит последний случайный символ из списка: chars ко всем элементам li, которые я добавляю в div #game_window_grid. Независимо от того, каким способом я пытаюсь переписать код, я все еще не могу получить правильное значение для li.

Любая идея, что я должен изменить или что мне делать, чтобы получить правильное значение для div #game_window_grid li?

заранее спасибо