I'm trying to use a for loop to set a cookie for each individual Vimeo video player on a page. There are 26 video players. I am using the Vimeo.js SDK to listen for when a user pauses a video. The time of the video at the point of pause will be saved in a cookie so that if the user leaves the page and comes back, the video will be set to resume playback at that saved time stamp. I have the process down so 1 video's timestamp will be saved to 1 cookie when that video is paused, but now I am trying to recreate this for 25 other videos on the page. I could just copy/paste the same block of code 25 times but I would like to do it with a for loop.

The javascript that works for 1 video to save the timestamp to a cookie on pause:

$(function() {
var iframe = $('#player1');
var player1 = new Vimeo.Player(iframe[0]);
var getTimeCookie = Cookies.get('timeCookie');
player1.setCurrentTime(getTimeCookie).then(function(seconds) {});

player1.on('pause', function() {
        var savedTime = player1.getCurrentTime().then(function(seconds) { 
        seconds = Math.floor(seconds); 
        if(seconds != 0) {
        Cookies.set('timeCookie', seconds);       
      }
    });
  });
});

Now when I am trying to implement a for loop to iterate through for all of the individual video players with their unique IDs, I get the error "You must pass either a valid element or a valid id. at new Player... "

This is my for loop thus far:

for(var n = 1; n < 27; n++ )
$(function() {
var iframe = $('#player' + n);
var player1 = new Vimeo.Player(iframe[0]);
var getTimeCookie = Cookies.get('timeCookie' + n);
player1.setCurrentTime(getTimeCookie).then(function(seconds) {
  
});
  player1.on('pause', function() {

        var savedTime = player1.getCurrentTime().then(function(seconds) { 
        seconds = Math.floor(seconds); 
        if(seconds != 0) {
        Cookies.set('timeCookie' + n, seconds);    
      }
    });
  });
});

Each video player looks like this:

[x_video_embed no_container="true"]<iframe  id="player1" src="" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>[/x_video_embed]

Obviously the IDs will be "player1, player2, player3..." etc.

I'm at the point where it seems like it should be a simple step to iterate through each of the Vimeo players with a for loop on page load, however, I am not sure where I am going wrong at the moment.

Thank you for your help!!