在航点事件＆＃39;底部视图＆＃39;上显示下一项

Question

我有几个隐藏的div项目：

<div id="insertFeed">
<div id="event_item" class="loader" style="display:block"></div>
<div id="event_item" class="loader" style="display:none"></div>
<div id="event_item" class="loader" style="display:none"></div>
<div id="event_item" class="loader" style="display:none"></div>
<div id="event_item" class="loader" style="display:none"></div>
<div id="event_item" class="loader" style="display:none"></div>
</div>

在页面加载它首先显示，我有下一个监听器，当它到达底部时触发，以显示下一个隐藏的项目

var waypoint = new Waypoint({
element: document.getElementById('event_item'),
handler: function(direction) {
if (direction === "down") {
console.log(direction);
 $(this.element).closest('div').next('#event_item').fadeIn(3000).show();
}
},
offset: 'bottom-in-view'
});

但结果是它只触发一次并且只显示下一个隐藏项目之一，我想在每个底部显示下一个项目......

更新

我也尝试过：

$('#event_item').each(function (e) {
$(this).waypoint(function(direction) {
if (direction === 'down') {
   console.log(direction);
  $('#insertFeed:hidden').next().fadeIn(3000).show();
 }    
}, {
offset: 'bottom-in-view'
});
});

结果相同......