Обновление значения по клику один раз, когда существует несколько элементов

Question

У меня есть скрипка здесь http://jsfiddle.net/wMUTg/56/, что я пытаюсь обновить значение по одному при нажатии кнопки, только один раз. Подобно «лайк» функциональности на фейсбуке. У меня это работает, однако, если у меня есть несколько похожих элементов, обновляется только один. Я знаю, что должен использовать функцию $ this, но я изо всех сил пытаюсь найти, где ее разместить. Кроме того, кто-нибудь знает, может ли это быть достигнуто без поля ввода? В идеале, я бы хотел, чтобы он был в теге span, но сначала мне нужно было ввести значение.

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

Answer 1

@ CertainPerformance, верно. Вы должны использовать класс вместо нескольких идентификаторов в одном DOM.

Однако вот ваше решение:

Используется $(this).prev('#counter') в качестве селектора для ссылки на соответствующий элемент.

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