Highlight word to spell in drag and drop word game
===

I am creating a **drag and drop** word game. This part of the script dynamically creates a table from **12 random words** pulled from the **listOfWords.** I need a word in the table to be highlighted with the given CSS until it is completed to show the user which word to spell first. It would then randomly choose another word in the table to spell and so on....


    var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", "pin", "gag", "sat", "pat", "tap", "sap", "tag", "gig", "gap", "nag", "sag", "gas", "pig", "dig", "got", "not", "top", "pop", "god", "mog", "cot", "cop", "cap", "cod", "kid", "kit", "get", "pet", "ten", "net", "pen", "peg", "met", "men", "mum", "run", "mug", "cup", "sun", "mud", "rim", "ram", "rat", "rip", "rag", "rug", "rot", "dad", "sad", "dim", "dip", "did", "mam", "map", "nip", "tin", "tan", "nap", "sit", "tip", "pip", "sip", "had", "him", "his", "hot", "hut", "hop", "hum", "hit", "hat", "has", "hug", "but", "big", "bet", "bad", "bad", "bed", "bud", "beg", "bug", "bun", "bus", "bat", "bit", "fit", "fin", "fun", "fig", "fan", "fat", "lap", "lot", "let", "leg", "lit"];

    var guesses = {};

    var shuffledWords = listOfWords.slice(0).sort(function() {
    return 0.5 - Math.random();
    }).slice(0, 12);

    var tbl = document.createElement('table');
    tbl.className = 'tablestyle';
    var wordsPerRow = 2;
  
    for (var i = 0; i < shuffledWords.length; i += wordsPerRow) {
    var row = document.createElement('tr');

    for (var j = i; j < i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        guesses[word] = [];

        for (var k = 0; k < word.length; ++k) {
            var cell = document.createElement('td');


            $(cell).addClass('drop').attr('data-word', word);
            cell.textContent = word[k];
            // IF FIREFOX USE cell.textContent = word[j]; INSTEAD
            row.appendChild(cell);
            }
       }
        tbl.appendChild(row);
    }

    document.body.appendChild(tbl);

Here i have the script that **styles the word** accordingly depending on whether it is **wrong** or **right**...

    $(".drop").droppable({
    hoverClass: 'drophover',
    drop: function(event, ui) {
        word = $(this).data('word');

        guesses[word].push($(ui.draggable).attr('data-letter'));

        console.log(guesses);

        if (guesses[word].length == 3) {
            if (guesses[word].join('') == word) {
                $('td[data-word=' + word + ']').addClass("wordglow2");
            } else {
                $('td[data-word=' + word + ']').addClass("wordglow");
            }
        }
    },


    activate: function(event, ui) {
        word = $(this).data('word');


        $('td[data-word=' + word + ']').removeClass('wordglow');
    }
    });

Here is the **CSS** i want to apply to the words...

    .spellword {
 
        -webkit-box-shadow: inset 0px 0px 10px 5px #176BC9;
        box-shadow: inset 0px 0px 10px 5px #176BC9;
    
    }