Jquery - Выбор правильного класса из списка

Question

У меня есть следующий HTML:

<tr id="item-1"> 
    <td class="shopping-cart-quantity"> 
     <div class="product-quantity"> 
      <input id="product-quantity" data-area="item-1" data-product="1" type="text" value="3"> 
     </div> 
    </td> 
</tr> 

<tr id="item-2"> 
    <td class="shopping-cart-quantity"> 
     <div class="product-quantity"> 
      <input id="product-quantity" data-area="item-2" data-product="2" type="text" value="3"> 
     </div> 
    </td> 
</tr> 

<tr id="item-3"> 
    <td class="shopping-cart-quantity"> 
     <div class="product-quantity"> 
      <input id="product-quantity" data-area="item-3" data-product="3" type="text" value="3"> 
     </div> 
    </td> 
</tr> 

Поле ввода использует Twitter Bootstrap Спин и ввод ID = «продукт-количество» оказывает следующим образом:

<div class="input-group bootstrap-touchspin input-group-sm"> 
    <span class="input-group-btn"> 
     <button class="btn quantity-down bootstrap-touchspin-down" type="button"> 
      <i class="fa fa-angle-down"></i> 
     </button> 
    </span> 
    <span class="input-group-addon bootstrap-touchspin-prefix"></span> 
    <input id="product-quantity" data-area="item-3" data-product="3" type="text" value="3" readonly="" class="form-control input-sm"> 
    <span class="input-group-addon bootstrap-touchspin-postfix"></span> 
    <span class="input-group-btn"> 
     <button class="btn quantity-up bootstrap-touchspin-up" type="button"> 
      <i class="fa fa-angle-up"></i> 
     </button> 
    </span> 
</div> 

Моя цель - захватить значение области данных, чтобы я мог применять правильные количества к правильному продукту, но независимо от того, что я делаю, он всегда возвращает первый элемент в таблице.

Вот мой JQuery:

$('.product-quantity').on('click','.input-group',function(){ 
     alert($('.input-group').find('#product-quantity').data("area")); 
    }); 

Answer 1

Внутри обработчика щелчка this фактический элемент щелкнул:

$('.product-quantity').on('click','.input-group',function(){ 
     alert($(this).find('#product-quantity').data("area")); 
    }); 

но реальная проблема, имеющий повторяющиеся идентификаторы. Это недопустимо HTML, и jQuery может видеть только первое.

Заменить id="product-quantity" с классом и использовать .product-quantity