jQuery: modificar contenedor HTML en función del valor de la variable PHP que contiene

En mi web tengo una lista de 15 elementos (o conjuntos de elementos HTML) como éste:

introducir la descripción de la imagen aquí

El número grande y rosa lo creo a partir de una variable contador en PHP:

<div class="mr-3"> <?php echo '<span class="numero">'.$  contador.'</span>'; ?> </div> 

Querría que cada vez que la variable adquiere el valor 2 o el 12 (en general cualquiera cuyo último dígito sea un 2, pero como el máximo es 15, da igual) al contenedor span se le aplicase un margin-right: 15px; para que no quedase tan pegado al texto que lo acompaña.

He probado a hacer esto:

$  (function() {     let contador = "<?php echo $  contador;?>";      if(contador == 2 || contador == 12)      {         $  ('.numero').css('margin-right', '15px');     } }); 

Pero JQuery no encuentra relación entre contador y los objetos con class="numero" y se limita a añadir el estilo para todos ellos.

Gracias de antemano por vuestra ayuda.