Trouble with writing code for repeating unique elements in Webflow site

[sprea (Sprea One)]

Hi, I have a (stupid) repetition code for each button that control players in CMS that is working.
But code repetition takes so many lines I’ve not enough place to finish it on Before /body> tag ( which have some characters limits). I’m sure there is a smarter way to code that !

I’ll have around 20 players to control (more or less) with 20 buttons play, and 20 return button (1 on each section). So I would love to find shorter way to write it.
My code is actually like this (it’s always the same but only numbers need to change):

///////// 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 ... (same as precedent code until last player)
//(number of players is subject to change when updating the portfolio CMS)

how to say it in a smarter way instead of repeating the same code by adding +1 to each player and button??
something like
"on click on each #titre[numberX] => players[numberX-2].play "

that mean :
on click on #titre-2 = > player[0].play
on click on #titre-3 = > player[1].play
on click on #titre-4 = > player[2].play
and so on until the last player

and for the // Stop at end
“on player[numberX].on(‘ended’) =>player[numberX].pause”

That mean :
on player[0].on(‘ended’) = > player[0].pause
on player[1].on(‘ended’) = > player[1].pause
on player[2].on(‘ended’) = > player[2].pause
and so on until the last player

(By the way, I’ve tried to write this in an embed element with the help of a CMS attribute ‘order number’ but the code I tried didn’t work as expected. It’s maybe the shortest way to write this, but it looks I don’t know how to write it properly)…

Thanks for your help!

---

Here is my site Read-Only: https://preview.webflow.com/preview/julienwidmer?utm_medium=preview_link&utm_source=designer&utm_content=julienwidmer&preview=b1c6e4b8e968903cb0a0e7087aa1063b&workflow=preview

[jptrinh (Jean-Philippe Trinh)]

Hey @sprea

Kinda hard to test without the live site but here I try
What you can try to do is extract the number located in the id and put it in a variable.

$('.title').click(function() {
    var number = $(this).attr('id').split('-').pop();
    var player = number - 2;
    
    players[player].play();
    //...
}

Hope it works ! Let us know

[sprea (Sprea One)]

Thanks a lot Jean Philippe,

without any answer here, I’ve tried yesterday to ask and get my answer quickly there with a solution which work great !

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

the code works pretty well :

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;
}

BTW my live website with the code inside is there: julienwidmer.webflow.io

Your code seems interesting too ! another way.