How to advance to the next slides when a video ends?

How to advance to the next slides when a video ends?

I'm working on something to be used on TV broadcast where it shows the camera, a menu and bottom line at the bottom of the screen. Everything works great until I have a video to be played and I need to advance to the next slide. When the video ends, it plays it again and the right menu advances to the last item and scrolls until it can no longer scroll. Also the bottom part advances again when the second video ends.

Here's what I'm talking about if that didn't make sense:

When :video1: is done playing, it will play it again because there's a second video. The bottom third advances and when the second hidden video plays, the bottom advances again. The navigation menu on the right side goes all the way to the bottom and scrolls until it can't advanced anymore.

I think the problem is this, at least I think that's the problem:

  1.  $('.content-bottom div.slider-wrap div.slide-wrap video#video-to-play').on('ended',function(){ $("#next-item").click(); });
When a video ends, it clicks a button. This is the function of that button:
  1. $("#next-item").on("click", function(){
      var $next = $('.slide-wrap .shown').next();
      var $next2 = $('.slide-wrap2 .shown').next();
      if ($next.length) {
              scrollLeft: $next.position().left
          }, 0);
      if ($next2.length) {
              scrollLeft: $next2.position().left
          }, 200);
      var curr = $('.rundown-items .current').parent(); //find .current's parent
      var $children = $('.rundown-items').children();
      var firstcal = $children.length;
      var actual = firstcal - 9;
      $children.each(function (i) {
        if (i < actual) {
      if ( > 0) {
        $('.rundown-items').animate({scrollTop: '+=35px'}, 400);
        curr.children('.current').contents().unwrap(); // remove .current'<div class="current"></div>'); // add it to the next element
The button does multiple things: it removes the class .shown on .slide-wrap and .slide-wrap2 and applies .shown to the next item in the list and in the nav menu on the right side, it unwraps the current item and wraps the next item in the list and scrolls down 35px.

It works fine if there's one video but doesn't work if there's more than one video.

All help is greatly appreciated.