How to increment/decrements value of a dynamically generated text boxes

Question

I have a e-commerce website in Magento, for that on cart page I want to add + - button to increment and decrements values of dynamically generated text boxes of quantity. I have this much code which is working fine on localhost but its not working properly on live website

     <tr>
     <td>
       <input type="button" class="down" value="Down" data-min="0"/>
       <input type="text" class="incdec" value="0"/>
        <input type="button" class="up" value="Up" data-max="5"/>
    </td>
</tr>


     <tr>
     <td>
     <input type="button" class="down" value="Down" data-min="0"/>
      <input type="text" class="incdec" value="0"/>
      <input type="button" class="up" value="Up" data-max="5"/>
    <td>
   </tr>

and here is script

          <script>
             $(document).ready(function() {
         $(".up").on('click',function(){
         var $incdec = $(this).parent().find(".incdec");
         if ($incdec.val() < $(this).data("max")) {
          $incdec.val(parseInt($incdec.val())+1);
         }
     });

   $(".down").on('click',function(){
      var $incdec = $(this).parent().find(".incdec");
      if ($incdec.val() > $(this).data("min")) {
        $incdec.val(parseInt($incdec.val())-1);
      }
     });
    });
          </script>

For suitability I also attach a screen shot for what I'm looking for.

I have spent lot of time to achieve the same but I could not.

Answer 1

Could you please try like this

$(document).ready(function() {
         $(".up").on('click',function(){
         var $incdec = $(this).prev();
         if ($incdec.val() < $(this).data("max")) {
          $incdec.val(parseInt($incdec.val())+1);
         }
     });

   $(".down").on('click',function(){
      var $incdec = $(this).next();
      if ($incdec.val() > $(this).data("min")) {
        $incdec.val(parseInt($incdec.val())-1);
      }
     });
    });

Demo: http://jsfiddle.net/mail2asik/M8JTP/

Answer 2

Your code works fine - it's just that your HTML is not valid.

<table> 
    <tr>
        <td>
            <input type="button" class="down" value="Down" data-min="0"/>
            <input type="text" class="incdec" value="0"/>
            <input type="button" class="up" value="Up" data-max="5"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" class="down" value="Down" data-min="0"/>
            <input type="text" class="incdec" value="0"/>
            <input type="button" class="up" value="Up" data-max="5"/>
        <td>
    </tr>
</table>

Answer 3

if elements wasnt in DOM before script start, they be "unseen" for this script. try to set listener with "live" style - throw the element which was in DOM, example:

<script>
$(document).ready(function() {

  $(document.body).on("click", ".up", function(){
    var $incdec = $(this).parent().find(".incdec");
    if ($incdec.val() < $(this).data("max")) {
      $incdec.val(parseInt($incdec.val())+1);
    }
  });

  $(document.body).on("click", ".down", function(){
    var $incdec = $(this).parent().find(".incdec");
    if ($incdec.val() > $(this).data("min")) {
      $incdec.val(parseInt($incdec.val())-1);
    }
  });


});
</script>

PS and alse in answer near: delete "div" - it's not valid, to use div between rows of table

Answer 4

Just replace

$(this).data("min") with $(this).attr("data-min")

and $

(this).data("max") with $(this).attr("data-max")

and check.

Also is the reference to jquery file same in both localhost and in live website?

Also like "denat" told using div inside table is not valid