Q:

appendTo function not functioning

I am trying to code it such that when you hover and click one word(eg. chocolate, sugar or cocoa", it gives a sentence, click another word, another sentence. and then the rotating words continue rotating.
Any suggestions is deeply appreciated. Thanks, guys:)
checkout my jsfiddle: http://jsfiddle.net/hE2pk/
HTML:
<div id="steps"> 
    <div id="receipe"></div>
   <div id="text"></div>

</div>

JS:
var words = [
'<span id="pasta">Penne</span>', 
'<span id="meat">Italian Sausage</span>',
'<span id="oil">Olive Oil</span>', 
'<span id="onion">Onion</span>'

];

var index = 0;

$(document).ready(function rotate() {
  document.getElementById('text').innerHTML =words[(index++)%(words.length)];
  if($("#text").is(":hover")){
    setTimeout(rotate, 500);
  }
  else{
    setTimeout(rotate, 100);
  }
})()

$(function(){
    $('#pasta').on('click', function () {
        $("<p>Cook 8 ounces of pasta, according to its package directions.</p>").appendTo('#receipe');

        $("#steps").html('<div id="text"></div>'); 
    }); 

});

A:

Your code:

Appends <span id="pasta">…</span> to the DOM
Attaches a click handler to it
Replaces <span id="pasta">…</span> with <span id="meat">…</span> 100ms later

As soon as step #3 finishes, the #pasta span gets obliterated, along with the click handler!
The correct approach is to use event delegation. This is a technique where you attach an event handler higher up in the DOM (on something that you can reasonably expect not to be destroyed, like document), then listen for events that bubble up toward it. If the event originated from an element of interest, you fire your handler!
$(document).on('click', '#pasta', function() { ... });

Here's your example, fixed: http://jsfiddle.net/steveluscher/hE2pk/1/

