jQuery Add Class doesn't work

You are trying to access an element that probably does not exist at the time of the execution. This is why it doesn't work.

You need to wrap your code inside a $(function() { /* put code here */ } ); block.

The reason why it works on jsfiddle is because the site does it for you as convenience.

** Edit **

In JavaScript, it is a good (if not best) practice to enclose your code inside it's own context. Take a look at the jQuery, jQuery UI and many JavaScript widgets and libraries. For example :

(function($) {    // receive $ as parameter; a jQuery instance

    /* place code here

})(jQuery);   // invoke the function above with this instance of jQuery

The reason for this is

1. If you need to use a different version of jQuery, or are using a library that overrides the $ variable, this function above will not get affected by the changes
2. Every variables declared (ie. var x = "foo";) will not be available outside the function, so you are certain that you are not polluting the window (global) namespace and have the right value when you need it. (Expose a global object if you need access to something outside the function (Ex: window.someVar = localVar;)

However, the above function will get executed as it is loaded by the browser, and might get executed before any DOM element is inserted into the DOM tree. This can be a problem for scripts setting up event listeners and such. Thus, if you need the function to be executed only when the DOM element is completely loaded and ready to be used, enclose your code inside a jQuery onload callback :

jQuery(function() {

    /* place code here */

});

or even

(function($) {
    // executed right now

    $(function() {
        // executed only when the DOM is ready

        /* place code here */

    });

})(jQuery);

** Update **

After reading your code a little further, I can only see (as commented) some odd things.

1. Your IDs are numeric. From the HTML specification,

   ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

   So you should a an id prefix... or base your selection on element indexes

2. You can chain your queries instead of reparsing them all the time.

For example

jQuery(function() {

var firstPage = $(".post-preview > div:first").index(); // index of the first page
var lastPage = $(".post-preview > div:last").index(); // index of the last page
var currentPage = $('.post-preview > div.show').index() || firstPage;  // default to 0

$('.news > .right').stop().click(function() {
    if (currentPage == lastPage) {
        currentPage = $('.post-preview > div:eq(' + lastPage + ')')
           .hide()
           .removeClass('show')
           .siblings('div:first')  // first DIV
           .fadeIn(300)
           .addClass('show')
           .index();  // should be 0... but we never know
    } else {
        // note : will receive the next element index
        currentPage = $('.post-preview > div:eq(' + currentPage + ')')
           .hide()
           .removeClass('show')
           .next('div')             // get next DIV element
           .fadeIn(300)
           .addClass('show')
           .index();
    }
 });

 $('.news > .left').stop().click(function() {
     if (currentPage == firstPage) {
        currentPage = $('.post-preview > div:eq(' + currentPage + ')')
           .hide()
           .removeClass('show')
           .siblings('div:last')  // last DIV
           .fadeIn(300)
           .addClass('show')
           .index();
    } else {
        currentPage = $('.post-preview > div:eq(' + currentPage + ')')
           .hide()
           .removeClass('show')
           .prev('div')
           .fadeIn(300)
           .addClass('show')
           .index();
    }
});

});

And your HTML (no need for IDs anymore)

<div class="news">
<div class="arrow left"></div>
    <div class="post-preview">
        <div class='show'>Preview 1</div>
        <div>Preview 2</div>
        <div>Preview 3</div>
    </div>
</div>
</div>