Modifier une liste de span les un après les autres "Onclick"

Bonjour,

Je suis actuellement en plein apprentissage des langages web. J'ai des bases très légères en JavaScript, c'est pour cela que j'espère pouvoir compter sur votre aide.

Je m'explique donc sur ce dont je souhaite réaliser. J'ai un code à 9 chiffres (bouton avec images + fonction onclick). Quand je click sur l'un de ces boutons, j'ai une fonction JavaScript pour récupérer la valeur associée aux boutons et l'entrée dans un input type texte (comme pour une calculatrice).

Mais j'ai aussi juste au-dessus de ces boutons 8 span en forme de cercle, l'objectif, c'est que dès que je click sur un boutons un des cercles au-dessus devient rouge pour avertir l'utilisateur qu'il a sélectionné un chiffre (ce dernier ne verra pas l'input type texte où il y aura les valeurs).

Objectif : Remplir les span un par un à chaque click sur un bouton sans que la fonction onclick touche tous les span en même temps.

Mon but : réaliser le code de déverrouillage iPhone.

code html :

div
span
span
span
span
span
span
span
span
div

div
form
button onclick="act(0)"
button onclick="act(1)"
button onclick="act(3)"
button onclick="act(4)"
button onclick="act(5)"
button onclick="act(6)"
button onclick="act(7)"
button onclick="act(8)"
button onclick="act(9)"
input type ="texte" id="out" style= "visibility=hidden"

div
button id="buttonvn" /button
/div
/form
/div


code JavaScript :

// récupérer les valeurs des buttons //

let btn = document.getElementById('buttonvn');
btn.disabled = true;


function act(val){
var number = val;
document.getElementById("out").value += number;
btn.disabled = false;
}





Configuration: Windows / Chrome 102.0.0.0