title: jQuery increment and decrement button to append the applied value to a number
body: <p>So I want something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/HGjD9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HGjD9.png" alt="enter image description here"></a></p>
  
  <p>As you can see, there's a <code>+</code> and <code>-</code> button, to which if clicked, they show respective values appended at <code>No. of Units</code>. </p>
  
  <p>All in all, what I want is: </p>
  
  <ul>
  <li>for example, if I clicked the <code>+</code> four times, it will show <code>12+4</code> (the <code>+4</code> part with green color) </li>
  <li>and if I clicked the <code>-</code> six times, it will then show <code>12-2</code> (the <code>-2</code> part with red color), </li>
  <li>and if I clicked the <code>-</code> another ten times, it will stop at the value <code>12-12</code> and prompt/alert <code>Do you really want to delete this load?</code> (same function as the <code>x</code> button at the rightmost).</li>
  </ul>
  
  <p>The problem you see is, the adding of increment values works (if I click the <code>+</code> many times), but if I decrement it, it would only stop at <code>0</code> and alternates between <code>0</code> and <code>1</code> (the operationg used is still <code>+</code> and not <code>-</code> though), and not to the maximum default value (which in the picture above, is <code>12</code>).</p>
  
  <p>Also, if I clicked a decrement button first, it will only stop at <code>0</code> and the same case, it alternates between <code>0</code> and <code>1</code>.</p>
  
  <p>Why is this? Sorry, I was not able to commit the previous two iterations of this code but both have issues too (the first one works but it appends a <code>-n</code> value, thus <code>12--1</code> would appear, the second one would bypass the <code>def</code> value limit, it would reach <code>12-14</code> and so on). I am at a loss here already, so I would like some help. This is my jQuery code below.</p>
  
  <p><strong>PS. I'm constructing the rows through a jQuery <code>DataTables</code>, so I can't show the code that adds the rows because it is not too relevant.</strong></p>
  
  <p><strong>PS(2). Here's the <a href="https://jsfiddle.net/anobilisgorse/dydup32v/7/" rel="nofollow noreferrer">JSFiddle</a> implementation of the above.</strong></p>
  
  <p><strong>PS(3). It would be very appreciated if you modify the code below to your liking, as log as it FOLLOWS SUIT the THREE USE CASES STATED ABOVE. Thank you so much.</strong></p>
  
  <h2>jQuery</h2>
  
  <pre><code>// For increment and decrement no. of units
  var def = $('#costcenter_data tr').find('td:nth-child(2)').html(); // default value or the "12" in the example
  var out = def;
  
  // Increment button
  $('.btn.btn-xs.btn-primary.add-unit').click(function(e){
      var count = $('#costcenter_data tr').find('td:nth-child(2)');
      var value = parseInt(count.data('change_value'));
      var clicked;
  
      if (isNaN(value) &amp;&amp; isNaN(prev)) {
          value = 1;
          count.data('clicked', "+")
      } else {
          value++;
      }
      var prev = count.data('clicked');
      if (prev != "+") {
          clicked = "-";
      } else {
          clicked = prev;
      }
  
      $('#costcenter_data tr').find('td:nth-child(2)').html(out+clicked+value);
      count.data('change_value', value);
      count.data('clicked', "+");
  });
  
  // Decrement button
  $('.btn.btn-xs.btn-warning.remove-unit').click(function(e){
      var count = $('#costcenter_data tr').find('td:nth-child(2)');
      var value = parseInt(count.data('change_value'));
      var clicked;
  
      if (isNaN(value) &amp;&amp; isNaN(prev)) {
          value = 1;
          count.data('clicked', "-")
      } else if ((value-1) &lt; 0) {
          value--;
          value = Math.abs(value);
  
          if (value == parseInt(def)) {
              alert("Delete prompt here");
              return false;
          }
      } else {
          value--;
          clicked = count.data('clicked');
      }
      var prev = count.data('clicked');
      if (prev != "-") {
          clicked = "+";
      } else {
          clicked = prev;
      }
  
      $('#costcenter_data tr').find('td:nth-child(2)').html(out+clicked+value);
      count.data('change_value', value);
  });
  </code></pre>