Updating two lists with one JQuery function - php

Question

I have a little problem and hoping someone with JQuery knowledge can look at my code and spot what I'm doing wrong.
I have two unordered lists (dynamically created) that get updated with ajax.
With script below I can only get one list to update but not both. I cloned first script and changed variables for second list but only one gets updated.
Thanks for you help.
Here is the html code:
List one: <ul data-options="" class="elgg-list-mainriver elgg-sync elgg-list-river elgg-river"><li> .....</li>
</ul>
List Two: <ul data-options="" class="elgg-list-miniriver elgg-sync elgg-list-river elgg-river"><li> .....</li>
</ul>
And JQuery code:
elgg.provide('elgg.river');
elgg.river.init = function() {
var riverList = $('ul.elgg-list-mainriver');
//var miniriverList = $('.elgg-list-miniriver');
var time = 20000;
if (!window.rivertimer) {
window.rivertimer = true;
var refresh_river = window.setTimeout(function(){
elgg.river.timedRefresh(riverList);
//elgg.river.MinitimedRefresh(miniriverList);
}, time);
}
};
elgg.river.timedRefresh = function(object) {
var first = $('li:first', object);
if (!first.length) {
first = object;
}
var time = first.data('timestamp');
elgg.getJSON('activity', {
data : {
sync : 'new',
time : time,
options : object.data('options')
},
success : function(output) {
if (output) {
$.each(output, function(key, val) {
var new_item = $(val).hide();
//new_item = $(val).show();
object.prepend(new_item.fadeIn(600));
//object.prepend(new_item.$(val).show());
});
}
window.rivertimer = false;
elgg.trigger_hook('success', 'elgg:river:ajax');
}
});
}
elgg.provide('elgg.river_miniriver');
elgg.river_miniriver.init = function() {
var miniriverList = $('ul.elgg-list-miniriver');
var time = 20000;
if (!window.rivertimer) {
window.rivertimer = true;
var refresh_river = window.setTimeout(function(){
elgg.river_miniriver.timedRefresh(miniriverList);
}, time);
}
};
elgg.river_miniriver.timedRefresh = function(object) {
var first = $('li:first', object);
if (!first.length) {
first = object;
}
var time = first.data('timestamp');
elgg.getJSON('activity', {
data : {
sync : 'new',
time : time,
options : object.data('options')
},
success : function(output) {
if (output) {
$.each(output, function(key, val) {
var new_item = $(val).hide();
//new_item = $(val).show();
object.prepend(new_item.fadeIn(600));
//object.prepend(new_item.$(val).show());
});
}
window.rivertimer = false;
elgg.trigger_hook('success', 'elgg:river:ajax');
}
});
}
elgg.register_hook_handler('init', 'system', elgg.river.init);
elgg.register_hook_handler('success', 'elgg:river:ajax', elgg.river.init, 500);
elgg.register_hook_handler('init', 'system', elgg.river_miniriver.init);
elgg.register_hook_handler('success', 'elgg:river:ajax', elgg.river_miniriver.init, 500);
If I try to combine both lists class in the function "$('ul.elgg-list-miniriver, ul.elgg-list-mainriver')" than both lists get updated but first list item (li) gets "opacity:0;" in style????
This code:
elgg.river_miniriver.init = function() {
var miniriverList = $('ul.elgg-list-miniriver, ul.elgg-list-mainriver');
var time = 20000;
if (!window.rivertimer) {
window.rivertimer = true;
var refresh_river = window.setTimeout(function(){
elgg.river_miniriver.timedRefresh(miniriverList);
}, time);
}
};
elgg.river_miniriver.timedRefresh = function(object) {
var first = $('li:first', object);
if (!first.length) {
first = object;
}
var time = first.data('timestamp');
elgg.getJSON('activity', {
data : {
sync : 'new',
time : time,
options : object.data('options')
},
success : function(output) {
if (output) {
$.each(output, function(key, val) {
var new_item = $(val).hide();
//new_item = $(val).show();
object.prepend(new_item.fadeIn(1000));
//object.prepend(new_item.$(val).show());
});
}
window.rivertimer = false;
elgg.trigger_hook('success', 'elgg:river:ajax');
}
});
}