video Player with clickable playlist and sequential autoplay

how do I get my video player to play the next video in the playlist as opposed to randomly selecting videos after one is clicked. If the video is autoplayed on page load it moves on to the next one in the list without problems, but if a video is clicked from the playlist the next video auto played is always randomly selected. how to i get it to go to the next video in the list and show by highlighting the in list which video is currently playing. here is my html:

<!DOCTYPE html>
 <html>
   <head>
 <style>
 
   .mainVideo{
     border: 2px solid blue;
     width: 53%;
     float: left;
     padding: 1px 4px;
   }
   .play-list{
       border: 1px solid red;
       height: 409px;         
       width: 40%;
       float: left;
       margin-left: 0px;
       overflow: auto;
       padding: 0 4px;
   }
   
  .link_list{
      padding: 8px;
      background-color: #f1f1f1;
      margin-left: -40px;
  }

  .active{
  background-color: green;
  color: #fff;
  }



.link_list
hover{   
   color: #333;
   z-index: 1;
   height:30px;
   }

  ul{
   list-style: none;
   margin-top: 0px;
   
  }

  li{
    border: solid 1px #ccc;
     margin-top: 4px;
     border-radius: 5px;
  }
a:link{
   text-decoration: none;
}

{
   
   color: #000;
 }
 </style>
   </head>
 <body>
 <div class="container">
  <div class="mainVideo">
    <video autoplay playsinline controls="controls" 
 id="videoPlayer" height="400" muted></video>
  <h2 id="vTitle"></h2>
  

   </div>
   
  <div class="play-list">
     <ul id="playList_link">
         
       
     </ul> 
  </div>


 <div class="test" style="float: left;">
     <ul id="demo">
       
     </ul>
 </div>
 </div> 

and the javascript:

      const listo = ['<li id="dream2" 
 class="link_list">Dream 2</li>',
    '<li id="blazes2" class="link_list">Blazes 
 2</li>',
     '<li id="escapes2" class="link_list">Escapes 
 2</li>'
    ];


 const list = ['<li id="meltdown" 
 class="link_list">ForBiggerMeltdowns</li>',
          '<li id="subaru" 
 
 class="link_list">SubaruOutbackOnStreetAndDirt</li>',
          '<li id="bullrun" 
 class="link_list">WeAreGoingOnBullrun</li>',
          '<li id="foragrand" class="link_list">WhatCarCanYouGetForAGrand</li>',
          '<li id="steel" 
 class="link_list">TearsOfSteel</li>',
          '<li id="whatcar" 
 class="link_list">WhatCarCanYouGetForAGrand</li>',
          '<li id="gtreview" 
 class="link_list">VolkswagenGTIReview</li>',
          '<li id="bunny" 
 class="link_list">BigBuckBunny</li>',
          '<li id="dream" class="link_list">ElephantsDream</li>',
          '<li id="blazes" 
 class="link_list">ForBiggerBlazes</li>',
          '<li id="escapes" 
 class="link_list">ForBiggerEscapes</li>'
 ]
    
     
     





        

 let videoSource =  [

            
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4",
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos- 
 bucket/sample/VolkswagenGTIReview.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos- bucket/sample/BigBuckBunny.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos- 
 bucket/sample/ElephantsDream.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos- 
 bucket/sample/ForBiggerBlazes.mp4",
            
 "http://commondatastorage.googleapis.com/gtv-videos- 
 bucket/sample/ForBiggerEscapes.mp4"
        ]

 let keys = videoSource.keys(); 
 let text = "";
 let tex = "";

 for (let x of keys){
    if(x === 0){ tex += '<li id="meltdown" 
 class="link_list">ForBiggerMeltdowns</li>'; }
    if(x === 1){ tex += '<li id="subaru" 
 
 class="link_list">SubaruOutbackOnStreetAndDirt</li>';}
    if(x === 2){ tex += '<li id="bullrun" 
 class="link_list">WeAreGoingOnBullrun</li>';}
    if(x === 3){ tex += '<li id="foragrand" 
 class="link_list">WhatCarCanYouGetForAGrand</li>';}
    if(x === 4){ tex += '<li id="steel" 
 class="link_list">TearsOfSteel</li>';}
    if(x === 5){ tex += '<li id="whatcar" 
 class="link_list">WhatCarCanYouGetForAGrand</li>';}
    if(x === 6){ tex += '<li id="gtreview" class="link_list">VolkswagenGTIReview</li>';}
    if(x === 7){ tex += '<li id="bunny" 
 class="link_list">BigBuckBunny</li>';}
    if(x === 8){ tex += '<li id="dream" 
 class="link_list">ElephantsDream</li>';}
    if(x === 9){ tex += '<li id="blazes" 
 class="link_list">ForBiggerBlazes</li>';}
    if(x === 10){ tex += '<li id="escapes" 
 class="link_list">ForBiggerEscapes</li>';}

    text += tex + "<br>";
    text += x + "<br>"
 }

 document.getElementById('playList_link').innerHTML = 
 tex; 


            
        
            let i = 0; // global
        const videoCount = videoSource.length;
        const element = 
  document.getElementById("videoPlayer");

      
        function videoPlay(videoNum) {
            element.setAttribute("src", 
 videoSource[videoNum]);
            element.autoplay = true;
            element.load();
        }
 
 
 
 
 
 
 
 
 
 
 
 
 
  document.getElementById('videoPlayer'). 
  addEventListene r('ended', myHandler, false);
        
        videoPlay(0); // load the first video
        ensureVideoPlays(); // play the video 
 automatically
        
        function myHandler() {
            i++;
            if (i == videoCount) {
                i = 0;
                videoPlay(i);
            } else {
                videoPlay(i);
            }
        }
        
        function ensureVideoPlays() {
            const video = 
 document.getElementById('videoPlayer');
        
            if(!video) return;
            
            const promise = video.play();
            if(promise !== undefined){
                promise.then(() => {
                    // Autoplay started
                    this.classList.add('active');
                }).catch(error => {
                    // Autoplay was prevented.
                    video.muted = true;
                    video.play();
                });
            }
        }
 const video = 
 document.getElementById('videoPlayer');
 let playList_link = 
 document.getElementById('playList_link');

 let vSource0 = videoSource[0];
 let Meltdown = document.getElementById('meltdown');
 Meltdown.addEventListener('click', () =>{            
              //alert('this one');
              
 document.getElementById('vTitle').innerHTML = 'intro. ForBiggerMeltdowns';
         
 Meltdown.classList.add('active');
 Subaru.classList.remove('active');
 TearsOfSteel.classList.remove('active');
 Bullrun.classList.remove('active');
 Foragrand.classList.remove('active');
 Steel.classList.remove('active');
 Whatcar.classList.remove('active');
 Gtreview.classList.remove('active');
 Bunny.classList.remove('active');
 Dream.classList.remove('active');
 Blazes.classList.remove('active');
 Escapes.classList.remove('active');
 TearsOfSteel.classList.remove('active') ;




               vid => vid.classList.remove('active')
              video.classList.add('active'); 
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
  vSource0);
            //console.log(src);     
            mainVideo.src = vSource0;
    }  
            
 });




 let vSource1 = videoSource[1];
 let Subaru = document.getElementById('subaru');
 Subaru.addEventListener('click', function() {                           
              
 document.getElementById('vTitle').innerHTML = '1. 
 SubaruOutbackOnStreetAndDirt';
              Meltdown.classList.remove('active');
              Subaru.classList.add('active');              
              Bullrun.classList.remove('active');
              Foragrand.classList.remove('active');
              Steel.classList.remove('active');
              Whatcar.classList.remove('active');
              Gtreview.classList.remove('active');
              Bunny.classList.remove('active');
              Dream.classList.remove('active');
              Blazes.classList.remove('active');
              Escapes.classList.remove('active');
               
              
              vid => vid.classList.remove('active')
              video.classList.add('active');              
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource1);             
            mainVideo.src = vSource;            
    }               
 });


 let linkList = 
 document.querySelectorAll('link_list'); 
 let mainVideo = document.querySelector('mainVideo');
 let TearsOfSteel = document.getElementById('steel');



 //Meltdown.addEventListener('ended', /* videoPlay(2) 


 let vSource2 = videoSource[2];   
 let Bullrun = document.getElementById('bullrun');
 Bullrun.addEventListener('click', () =>{             
              //alert('this one');
              
 document.getElementById('vTitle').innerHTML = '2. 
 WeAreGoingOnBullrun';
             
 Meltdown.classList.remove('active');
 Subaru.classList.remove('active');
 TearsOfSteel.classList.remove('active');
 Bullrun.classList.add('active');
 Foragrand.classList.remove('active');
 Steel.classList.remove('active');
 Whatcar.classList.remove('active');
 Gtreview.classList.remove('active');
 Bunny.classList.remove('active');
 Dream.classList.remove('active');
 Blazes.classList.remove('active');
 Escapes.classList.remove('active');
 TearsOfSteel.classList.remove('active');

 vid => vid.classList.remove('active')
              video.classList.add('active');
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource2);
            //console.log(src);     
            mainVideo.src = vSource2;
    }     
            
 });

 let vSource3 = videoSource[3];
 let Foragrand = 
 document.getElementById('foragrand');
 Foragrand.addEventListener('click', () =>{               
         document.getElementById('vTitle').innerHTML 
 = 'WhatCarCanYouGetForAGrand';
             
 Meltdown.classList.remove('active');
 Subaru.classList.remove('active');
 TearsOfSteel.classList.remove('active');
 Bullrun.classList.remove('active');
 Foragrand.classList.add('active');
 Steel.classList.remove('active');
 Whatcar.classList.remove('active');
 Gtreview.classList.remove('active');
 Bunny.classList.remove('active');
 Dream.classList.remove('active');
 Blazes.classList.remove('active');
 Escapes.classList.remove('active');
 TearsOfSteel.classList.remove('active');

            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource3);
            //console.log(src);     
            mainVideo.src = vSource3;
    }     
            
 });



 let vSource4 = videoSource[4];
 let Steel = document.getElementById('steel');
 Steel.addEventListener('click', () =>{               
              //alert('this one');
              
 document.getElementById('vTitle').innerHTML = 'TearsOfSteel';

               Meltdown.classList.remove('active');
 Subaru.classList.remove('active');
 TearsOfSteel.classList.remove('active');
 Bullrun.classList.remove('active');
 Foragrand.classList.remove('active');
 Steel.classList.add('active');
 Whatcar.classList.remove('active');
 Gtreview.classList.remove('active');
 Bunny.classList.remove('active');
 Dream.classList.remove('active');
 Blazes.classList.remove('active');
 Escapes.classList.remove('active');
 


 vid => vid.classList.remove('active')
              video.classList.add('active');
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource4);
            //console.log(src);     
            mainVideo.src = vSource4;
    }     
            
 });




 let vSource5 = videoSource[5];
 let Whatcar = document.getElementById('whatcar');
 Whatcar.addEventListener('click', () =>{             
              
              
 document.getElementById('vTitle').innerHTML = 
 'WhatCarCanYouGetForAGrand';
              
 Meltdown.classList.remove('active');
 Subaru.classList.remove('active');
 Bullrun.classList.remove('active');
 Foragrand.classList.remove('active');
 Steel.classList.remove('active');
 Whatcar.classList.add('active');
 Gtreview.classList.remove('active');
 Bunny.classList.remove('active');
 Dream.classList.remove('active');
 Blazes.classList.remove('active');
 Escapes.classList.remove('active');

 vid => vid.classList.remove('active')
              video.classList.add('active');
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource5);
            //console.log(src);     
            mainVideo.src = vSource5;
    }     
            
 });


 let vSource6 = videoSource[6];
 let Gtreview = document.getElementById('gtreview');
 Gtreview.addEventListener('click', () =>{            
              
              
 document.getElementById('vTitle').innerHTML = 
 'VolkswagenGTIReview';
              
              Meltdown.classList.remove('active');
              Subaru.classList.remove('active');              
              Bullrun.classList.remove('active');
              Foragrand.classList.remove('active');
              Steel.classList.remove('active');
              Whatcar.classList.remove('active');
              Gtreview.classList.add('active');
              Bunny.classList.remove('active');
              Dream.classList.remove('active');
              Blazes.classList.remove('active');
              Escapes.classList.remove('active');
                           
              
              
              vid => vid.classList.remove('active')
              video.classList.add('active');
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource6);
            //console.log(src);     
            mainVideo.src = vSource6;
    }     
            
 });


 let vSource7 = videoSource[7];
 let Bunny = document.getElementById('bunny');
 Bunny.addEventListener('click', () =>{               
              //alert('this one');
              
 document.getElementById('vTitle').innerHTML = 
 'BigBuckBunny';

              Meltdown.classList.remove('active');
              Subaru.classList.remove('active');
              Bullrun.classList.remove('active');
              Foragrand.classList.remove('active');
              Steel.classList.remove('active');
              Whatcar.classList.remove('active');
              Gtreview.classList.remove('active');
              Bunny.classList.add('active');
              Dream.classList.remove('active');
              Blazes.classList.remove('active');
              Escapes.classList.remove('active');              


              vid => vid.classList.remove('active')
              video.classList.add('active');
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource7);
            //console.log(src);     
            mainVideo.src = vSource7;
    }     
            
 });

 let vSource8 = videoSource[8];
 let Dream = document.getElementById('dream');
 Dream.addEventListener('click', () =>{               
              //alert('this one');
              
 document.getElementById('vTitle').innerHTML = 
 'ElephantsDream';

              Meltdown.classList.remove('active');
              Subaru.classList.remove('active');
              Bullrun.classList.remove('active');
              Foragrand.classList.remove('active');
              Steel.classList.remove('active');
              Whatcar.classList.remove('active');
              Gtreview.classList.remove('active');
              Bunny.classList.remove('active');
              Dream.classList.add('active');
              Blazes.classList.remove('active');
              Escapes.classList.remove('active');
               

              vid => vid.classList.remove('active')
              video.classList.add('active');
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource8);
            //console.log(src);     
            mainVideo.src = vSource8;
    }     
            
 });

 let vSource9 = videoSource[9];
 let Blazes = document.getElementById('blazes');
 Blazes.addEventListener('click', () =>{              
              //alert('this one');
              
 document.getElementById('vTitle').innerHTML = 
 'ForBiggerBlazes';

              Meltdown.classList.remove('active');
              Subaru.classList.remove('active');             
              Bullrun.classList.remove('active');
              Foragrand.classList.remove('active');
              Steel.classList.remove('active');
              Whatcar.classList.remove('active');
              Gtreview.classList.remove('active');
              Bunny.classList.remove('active');
              Dream.classList.remove('active');
              Blazes.classList.add('active');
              Escapes.classList.remove('active');
               

              vid => vid.classList.remove('active')
              video.classList.add('active');
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource9);
            //console.log(src);     
            mainVideo.src = vSource9;
    }     
            
});


 let vSource10 = videoSource[10];
 let Escapes = document.getElementById('escapes');
 Escapes.addEventListener('click', () =>{             
              //alert('this one');
              
 document.getElementById('vTitle').innerHTML = 'ForBiggerEscapes';
              
              Meltdown.classList.remove('active');
              Subaru.classList.remove('active');              
              Bullrun.classList.remove('active');
              Foragrand.classList.remove('active');
              Steel.classList.remove('active');
              Whatcar.classList.remove('active');
              Gtreview.classList.remove('active');
              Bunny.classList.remove('active');
              Dream.classList.remove('active');
              Blazes.classList.remove('active');
              Escapes.classList.add('active');
              
              
              vid => vid.classList.remove('active')
              video.classList.add('active');
            if(video.classList.contains('active')){
            let src = video.setAttribute('src', 
 vSource10);
            //console.log(src);     
            mainVideo.src = vSource10;
    }     
            
 });



 playList_link.addEventListener('click', () => { 
    
    this.classList.add('active');

 Meltdown.classList.remove('active');
 Subaru.classList.remove('active');

 Bullrun.classList.remove('active');
 Foragrand.classList.remove('active');
 Steel.classList.remove('active');
 Whatcar.classList.remove('active');
 Gtreview.classList.remove('active');
 Bunny.classList.remove('active');
 Dream.classList.remove('active');
 Blazes.classList.remove('active');
 Escapes.classList.remove('active');
 }); 

 Bunny.addEventListener('click', ()=>{
    //alert('video')
    var li = 
  window.document.querySelector('.link_list')
    if(li.classList === 'active') {
       console.log(li); 
       alert('set to');
    } else {
        alert('Not set to');
        console.log(video.classList)
    }
 });