I realize this thread is a little old but in case anyone is looking at this and wants a slightly more refined version, here you go:
$(document).ready(function() {
var i = 1;
var j = 1;
var k = 0;
//add number to each letter
$('.anagram-letter').each(function(){
$(this).addClass('letter-' + i);
i++;
});
$('.clue').each(function(){
$(this).addClass('space-' + j);
j++;
});
//clicking letter sends it to first empty div
$('.anagram-letter').click(function(){
var $this = $(this);
var clue = $('.clue');
var target = $('.target');
//defines the clicked anagram letter content
var letter = $this.html();
//loop checking if each clue has a class of target
var full = clue.each(function(){
clue.hasClass('target');
//k counts from 0 adding 1 each time as it moves from clue to clue
k++;
});
if(clue.hasClass('target') && $this.html() != ''){
//add empty class to clicked anagram-letter
$this.addClass('empty');
//append letter to first clue with class of target
target.first().append(letter);
$this.html('');
//add full class to first target
target.first().addClass('full');
//add target class to the clue next to the original target
target.next('.clue').addClass('target');
//remove target class from first clue with target class
target.first('.clue').removeClass('target');
}
});
$('.clue').click(function(){
var $this = $(this);
//defines the content of the clicked clue
var letters = $this.html();
if(letters != ''){
//append content of clue to first anagram with empty class
$('.anagram-letter.empty').first().append(letters);
$this.html('');
//remove empty class from that anagram
$('.anagram-letter.empty').first().removeClass('empty');
$('.clue').removeClass('target');
$this.addClass('target');
$this.removeClass('full');
}
});
});