Question

The fallowing table has many identical text inputs…

<table>
  <tr>
    <td>
      <a href="#" id="plus"><img src="plus.png" width="12" height="12" /></a>
      <input type="text" value="0" />
      <a href="#" id="minus"><img src="minus.png" width="12" height="12" /></a>
    </td>
    .
    .

    <td>
      <a href="#" id="plus"><img src="plus.png" width="12" height="12" /></a>
      <input type="text" value="0" />
      <a href="#" id="minus"><img src="minus.png" width="12" height="12" /></a>
    </td>
  </tr>
</table>  

and the fallowing jQuery script should increment/decrement the value of its closet text input…

 $("#plus").click(function(){
   var text = $(this).next(":text");
   text.val(parseInt(text.val(), 10) + 1);
 });

$("#minus").click(function(){
   var text = $(this).prev(":text");
   aux.val(parseInt(aux.val(), 10) - 1);
 });

the problem is that the script only works fine on the first pair of links of the table, incrementing and decrementing the value of its closest text input by one, and the rest of the remaining pairs of links don’t change the value of its closest text input and whats even worse, the links propagate to the home/jthernandez/Desktop/test.html# url when they are clicked on.

I’m not really sure whats going on here but the idea is that each pair of +, – links changes the value of its next(), prev() text input respectively. Any suggestions would be great. Thanks

Answer 1

You are close. As others have mentioned, you cannot have the same ID more than once. IDs are unique, to IDentify a single element. JavaScript will only look until it finds one, and then stop. Classes are used to group common elements. Use a class and your code should work fine (minus a typo in your javascript):

HTML:

<td>
    <a href="#" class="plus"><img src="plus.png" width="12" height="12" /></a>
    <input type="text" value="0" />
    <a href="#" class="minus"><img src="minus.png" width="12" height="12" /></a>
</td>

JS (you have a typo in minus, creating text, but using aux):

$(".plus").click(function(){
    var text = $(this).next(":text");
    text.val(parseInt(text.val(), 10) + 1);
});

$(".minus").click(function(){
    var text = $(this).prev(":text");
    text.val(parseInt(text.val(), 10) - 1);
});

Demo: http://jsfiddle.net/jtbowden/bfM9Z/