Mise à jour d'une valeur lors d'un clic unique alors que plusieurs éléments existent

Question

J'ai un violon ici http://jsfiddle.net/wMUTg/56/ que j'essaie de mettre à jour une valeur par un lorsque l'on clique sur un bouton, une seule fois. C'est un peu comme la fonctionnalité "like" sur facebook. J'ai réussi à le faire, mais si j'ai plusieurs éléments similaires, un seul est mis à jour. Je sais que je dois utiliser la fonctionnalité $this mais j'ai du mal à trouver où la mettre. Je ne sais pas si je peux le faire sans champ d'entrée, mais je ne sais pas non plus si je peux le faire sans champ d'entrée. Je ne sais pas si je peux le faire sans champ de saisie. Idéalement, j'aimerais qu'il soit dans une balise span, mais j'avais besoin que la valeur soit d'abord saisie.

$(".red #update").one("click", function() {
   var val;
   val = $('#counter').val();
   val++;
   $('#counter').prop('value',val );
});

Answer 1

@CertainPerformance, a raison. Vous devriez utiliser la classe au lieu d'utiliser les mêmes ID multiples dans un DOM.

Mais voici la solution :

Utilisé $(this).prev('#counter') comme sélecteur pour renvoyer à l'élément pertinent.

$(".red #update").one("click", function() {
   var val;
   val = $(this).prev('#counter').val();
   val++;
   $(this).prev('#counter').prop('value',val );
});