Add a previous and next button to a listener

How could you add a previous and next button to this listener? It would be your thing if it is in video 1 that it does not show the previous button and if it is in the last video the same for the next button.

I am using the YouTube Player API , the code is from this SOes Answer , I have customized it a bit.

I know that you can create one playlistin the YouTube Iframe API , but in my case I want to create it through individual buttons and then the buttons prev/next, since the information, topics, videos to study, etc. I get them via PHP from my Database.

My code : JSFiddle

Try to add a value,ito get the index of the buttons, I saw in the console that I get a NodeList that shows me all the buttons and a length: 4

  console.log(value);

  editButtons.forEach(function(item, idx, value, i) {

Find out how you could iterate through that list to get the current index to create the previous or next buttons. Try this:

      value.forEach( 
        function(currentValue, currentIndex, listObj) {
            
            console.log(currentValue, currentIndex); 
          },
        );

I get all the buttons back in the console and with more information (accesskey: "",...,className: "btn-Play".., etc.)

But I still don't understand how I could do these two functions, something like a typical PHP pagination that has those buttons, I have to say that I have very basic knowledge of JavaScript.

EDIT

I add new tests after Sal's comment, but it still doesn't work as it should. I managed to get the prev/next buttons to work as soon as the page loads, but now the error comes, if I click on the normal button, that is, for example, it loads video 2, it loads said video through the other listener, now the problem, if now I use the prev/next it no longer has the indices of (var vdo = ['LSdmIKtTkpQ', '4Ur0VvNcgPk', '4WLUQ6BTNwk'];), since when I use the button it is no longer 0, how could I solve it so that the buttons get the correct index prev/next?

// Youtube player
document.addEventListener("DOMContentLoaded", function(event) {

// Array con lista de videos disponibles. Este proces lo tendria que hacer con PHP para obtener estos datos
var vdo = ['n7l1oAYRThQ', 'G3P1IJaY6AA', '353B-kOxWz4'];
// current index (indice actual)
var i = 0;
  
// Creamos variable - boton .btn-play
var editButtons = document.querySelectorAll('.btn-Play');

// Buscamos todos los botones existentes para obtener el boton onclick
editButtons.forEach(function(item, idx) {
   // Añadimos evento onclick a nuestro botones
   item.addEventListener('click', function() {
      
     // Obtengo el numero indice actual       
     let index = vdo.findIndex(el=> el ==item.dataset.id);
     //console.log(index);  
     var i = index; // Modifico el indice actual
      
      // Mostramos data-id del boton on click
      //console.log(item.dataset.id);         
      
      //Obtenemos titulo 
      var dataTitle = item.dataset.title;
      //console.log(dataTitle);
      
      //Cambiar HTML layout de un DIV #titulo
      document.getElementById('title_vdo').innerHTML = dataTitle;

      // Pasamos el id del video a reproducir.
      player.loadVideoById(item.dataset.id);
      
      // Dirigimos con scroll hacia nuestro reproductor (#player)          
      $("html, body").animate({
        scrollTop: $('#player').offset().top 
      }, 2000);

   });
});
  
// Selecionamos botones prev/next
var prevBtn = document.querySelector('.btn-Prev');
var nextBtn = document.querySelector('.btn-Next');


// Evento onclick PREV
prevBtn.addEventListener('click', function() {

   // Mostramos data-id del boton on click
   console.log(i);      

   if (i <= 0) i = vdo.length;
     i--;
     return loadVdo();      
   });

  // Evento onclick NEXT
  nextBtn.addEventListener('click', function() {

      // Mostramos data-id del boton on click
      console.log(vdo[i]);      

      if (i >= vdo.length-1) i = -1;
      i++;
      console.log(vdo[i]); 
      return loadVdo();      
   });

   // Pasamos video a la API Youtube Player
   function loadVdo() {
        // Pasamos el id del video a reproducir.
      return player.loadVideoById(vdo[i]);
   }

});

I add these buttons:

<button class="btn-Prev font20"><i class='far fa-caret-square-left'>&nbsp;</i></button> 
<button class="btn-Next font20"><i class='far fa-caret-square-right'>&nbsp;</i></button> 

With these buttons the videos are played in the first onclick event.

<button class="btn-Play" data-id="n7l1oAYRThQ" data-title="Video 1">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA" data-title="Video 2">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4" data-title="Video 3">Video 3</button>

EDIT code : JSFiddle

After fighting, I managed to make the prev/next buttons work, even change the title, I would only need the previous button to disappear if it is in video 1 and if it is in the last video, the same for the next one, I could do it with PHP, although I would like with JS.

Updated code : JSFiddle

I would appreciate the help!