Q:

'next' button not showing all hidden sibling divs; it stops at the second and does not advance to last div. [jquery, js, html5]

I have designed an i-phone-like screen on a web browser where I am testing this application I am in the process of building. There will be two video windows, the second of which is hidden.(SEE IMAGE ATTACHED) 

The user views the main channel as the page loads and can access the second window if she so chooses through a button. The videos playing on the main channel are those related to this channel only, and the second window gives access to the other channels, and shows the user what's playing.
Everything works fine, except that I am using the 'next' button on the second video window and not advancing to the third video on the list. I am not sure why it's not showing. The 'prev' button shows the third video perfectly. The code I am using is basically the same I used on the top video section, where everything worked.

Below is the section of the code that I am using for prev and next on the three videos of this specific section that is NOT working.
html code for 3 videos (w some inline js)
<div id="bottomVid">
<div class="videoContainerTwo channelPolitics">

<div class="topHorizontalButtonRow"><a href="#" class="buttonLeftTriangleBlue channelPolitics" id="prevButtonBottom"></a>
 <a href="#" class="buttonRightTriangleBlue channelPolitics" id="nextButtonBottom"></a>
</div>

 <video loop onclick="this.paused? this.play() : this.pause()" >
<source src="videos/Politics_Refugee_Sign.mp4"  type="video/mp4">
Your browser does not support the video tag.
</video></div>

<div class="videoContainerTwo channelKillingTheEyelinerGame hiddenElement">
  <div class="topHorizontalButtonRow">
          <a href="#" class="buttonLeftTriangleBlue channelKillingTheEyelinerGame" id="prevButtonBottom"></a>
        <a href="#" class="buttonRightTriangleBlue channelPolitics" id="nextButtonTop"></a>
          </div>

<video loop onclick="this.paused? this.play() : this.pause()" >
<source src="videos/killing the eyeliner game_horiz mob sz.mp4"  type="video/mp4">
Your browser does not support the video tag.
</video></div>

<div class="videoContainerTwo channelParisIsBurning hiddenElement">
  <div class="topHorizontalButtonRow">
          <a href="#" class="buttonLeftTriangleBlue channelParisIsBurning" id="prevButtonBottom"></a>
        <a href="#" class="buttonRightTriangleBlue channelParisIsBurning" id="nextButtonTop"></a>
          </div>

<video loop onclick="this.paused? this.play() : this.pause()" >
<source src="videos/ParisisBurning_370x660_Get_Into_The_Suits_Vert.mp4"  type="video/mp4">
Your browser does not support the video tag.
</video></div>
</div>

THE ISSUE: JS code for 'next' navigation [this only goes up to the second video and stops there]
$(document).ready(function(){
    $("#bottomVid.videoContainerTwo").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#nextButtonBottom.buttonRightTriangleBlue").click(function(){
        if ($(".videoContainerTwo:visible").next().length != 0)
            $(".videoContainerTwo:visible").next().show().prev().hide();
        else {
            $(".videoContainerTwo:visible").hide();
            $(".videoContainerTwo:first").show();
        }
        return false;

    });

THE 'PREV' NAVIGATION WORKS AND THE CODE IS ALMOST THE SAME: JS code for "prev" navigation [this works perfectly, I see all 3 videos and it loops through the 3 videos]
  $("#prevButtonBottom.buttonLeftTriangleBlue").click(function(){
      if ($(".videoContainerTwo:visible").prev().length != 0)
          $(".videoContainerTwo:visible").prev().show().next().hide();
      else {
          $(".videoContainerTwo:visible").hide();
          $(".videoContainerTwo:last").show();
      }
        return false;
    });

});

A:

Glad you found the problem. However, I think I found something else:
Shouldn't 
$("#nextButtonBottom.buttonRightTriangleBlue").click(function(){
    if ($(".videoContainerTwo:visible").next().length != 0)
        $(".videoContainerTwo:visible").next().show().prev().hide();
    else {
        $(".videoContainerTwo:visible").hide();
        $(".videoContainerTwo:last").show();
    }
    return false;
});

Be
$("#nextButtonBottom.buttonRightTriangleBlue").click(function(){
    if ($(".videoContainerTwo:visible").next().length != 0)
        $(".videoContainerTwo:visible").next().show().prev().hide();
    else {
        $(".videoContainerTwo:visible").hide();
        $(".videoContainerTwo:first").show();
    }
    return false;
});

Note I changed last to first on line 6. Since you're wrapping around, after item 3 is shown and someone clicks NEXT, it will go back to item 1, correct? So it should show the FIRST, not the LAST. Amirite? 

