Smarter code that avoid repetition to control multiple players in one page

for a one-page portfolio, I have some repetition code for each button that control some video players populated by CMS.

I’ll have 15 to 20 players to control with each one is own button on the page to launch it , and return button to stop (1 on each section). I use Webflow which limit the number of characters for the code.

I would love to find the shorter/smarter way to write this for each player without 20 repetition in the code.

///////// for Player 0 //

// Play on click .titre
on('#titre-2', 'click', () => { 
players[0].play();
});
// Stop and back to 0 at end 
players[0].on('ended', function(event) {
players[0].pause();
players[0].currentTime = 0;


////////// for Player 1 //

// play on click .titre
on('#titre-3', 'click', () => { 
players[1].play();
});
// stop at end 
players[1].on('ended', function(event) {
players[1].pause();
players[1].currentTime = 0;
});  

/////// for player 3  ////

...

... and so on for 15 to 20 players, until last player (number of players is subject to change when updating the portfolio with CMS)

EDIT : here is the full code from the beginning, with the part of the code for each player at the end, that need to be improved :

    <script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
        <script>
        document.addEventListener('DOMContentLoaded', () => {
    const controls = [
    'play-large','restart','play','progress',
    'current-time','mute','volume','fullscreen'
    ];  
    
    //init PLAYERS
    const players = Array.from(document.querySelectorAll('.player_js')).map(p => new Plyr(p,{ controls }));

// Expose player so it can be used from the console
window.players = players;

// Bind event listener
function on(selector, type, callback) {
document.querySelector(selector).addEventListener(type, callback, false);
}

///////// for Player 0 //

// Play on click .titre
on('#titre-2', 'click', () => { 
players[0].play();
});
// Stop and back to 0 at end 
players[0].on('ended', function(event) {
players[0].pause();
players[0].currentTime = 0;


////////// for Player 1 //

// play on click .titre
on('#titre-3', 'click', () => { 
players[1].play();
});
// stop at end 
players[1].on('ended', function(event) {
players[1].pause();
players[1].currentTime = 0;
});  

/////// for player 3  ////

/// AND SO ON ...

});

You can loop the code :

for(let x = 0 ; x < 20 ; x ++){
     // Play on click .titre
    on('#titre-' + (x + 2), 'click', () => { 
    players[x].play();
    });
    // Stop and back to 0 at end 
    players[x].on('ended', function(event) {
    players[x].pause();
    players[x].currentTime = 0;
}

But the best solution is create a class of players