Put your code in a "ready" handler:
$(function() {
// all of your current code here
});
The jsfiddle site does that for you, unless you tell it not to. See that selection pull-down on the left side, below where you choose your library, where it says "onLoad"? That means that jsfiddle wraps your JavaScript in a "load" handler for the window. What I'm suggesting is similar (the jsfiddle option "on DOM ready"). What you've got in your code is the equivalent of "No wrap - in <head>
", and if you choose that setting and try your fiddle, it won't work.
What's going on here is that if your code runs before the HTML is parsed into the DOM, your search for "#beatles" will find nothing. By delaying things until the DOM is ready, you ensure that the code will find the element(s) it needs.