I'm still not sure what your question is, but I reworked your code a bit to make it work with any number of feed panels (updated demo).
$(document).ready(function(){
var feeds = $('#feeds div'),
numFeeds = feeds.length;
feeds
.click(function(){
$(this)
.animate({"margin-left": "-200px", opacity: 0}, "fast")
.animate({"margin-left": "200px"}, "fast");
// add 2 since the id isn't zero based
var next = ( $(this).index() + 2 > numFeeds ) ? 1 : $(this).index() + 2;
$('div#feed' + next).animate({"margin-left": 0, opacity: 1}, "fast")
})
.nextAll().css({ 'margin-left' : '200px', opacity : 0 });
});
To add feeds dynamically you'll need to either attach a click function to each new feed added or use the jQuery .live() event handler. I opted for the previous method. Here is the updated demo, and the code:
$(document).ready(function(){
var feeds = $('#feeds .feeds'),
numFeeds = feeds.length;
// initialize
feeds
.click(function(){ animateFeed(this, numFeeds); })
.nextAll().css({ 'margin-left' : '200px', opacity : 0 });
// add another feed
$('.addFeed').click(function(){
$('<div id="feed' + ( numFeeds++ +1 ) + '" class="feeds">' + numFeeds +'</div>')
.click(function(){ animateFeed(this, numFeeds); })
.css({ 'margin-left' : '200px', opacity : 0 })
.appendTo(feeds.parent());
$('#num').text(numFeeds);
})
});
// animate feed panel
function animateFeed(el, num){
var indx = $(el).index(),
next = ( indx + 1 ) % num;
$('.feeds').removeClass('active');
$(el)
.animate({ marginLeft : '-200px', opacity: 0}, 'fast')
.animate({ marginLeft : '200px'}, 'fast' );
$('.feeds:eq(' + next + ')').animate({ marginLeft : 0, opacity : 1}, 'fast', function(){ $(this).addClass('active') } );
}