Почему меняет класс только у первого элемента?

Question

[Emmet1]

У меня есть ряд ссылок

<a id="button_paid" class="paid" title="Изменить статус"></a>
<a id="button_paid" class="paid" title="Изменить статус"></a>
<a id="button_paid" class="nopaid" title="Изменить статус"></a>
<a id="button_paid" class="paid" title="Изменить статус"></a>
<a id="button_paid" class="nopaid" title="Изменить статус"></a>

Как видно из кода, у них одинаковый id и два класса - paid и nopaid.
При клике по ссылке, класс paid должен меняться на nopaid и наоборот, если задан класс nopaid он должен поменяться на paid.

Для этого я прописал такой код:

$('#button_paid').click(function(){
	   if($(this).hasClass('nopaid')){
		   $(this).addClass('paid');
		   $(this).removeClass('nopaid');
		   $(this).text('Оплачено');
	   }
	   else{
		   $(this).addClass('nopaid');
		   $(this).removeClass('paid');
		   $(this).text('Не оплачено');
	   }
	});

Но он работает только для первой ссылки, остальные не реагируют

Comments

[Hyubert]

id должен быть уникальным, добавте к елементам класс button_paid и выберайте их по нему

Answer 1

[Евгений Николаев]

Конечно, потому что ID это уникальный идентификатор, и может быть присвоен только одному элементу.
Обращйся по классу, примерно так:

<a  class="paid button_paid" title="Изменить статус"></a>
<a  class="paid button_paid" title="Изменить статус"></a>
<a  class="nopaid button_paid" title="Изменить статус"></a>
<a class="paid button_paid" title="Изменить статус"></a>
<a class="nopaid button_paid" title="Изменить статус"></a>

$('.button_paid').click(function(){
     if($(this).hasClass('nopaid')){
       $(this).addClass('paid');
       $(this).removeClass('nopaid');
       $(this).text('Оплачено');
     }
     else{
       $(this).addClass('nopaid');
       $(this).removeClass('paid');
       $(this).text('Не оплачено');
     }
  });

Может я где то не правильно исправил, но суть примерно такая.

Comments

[Rsa97]

Rsa97 @Rsa97
JQ позволяет записать покороче:

$(this).addClass('paid').removeClass('nopaid').text('Оплачено');

[Emmet1]

Блин, действительно. Просто из головы вылетело про ID. Спасибо