Interference In .innerHTML Output Triggers

I am trying to output a calculated price based on a chosen quantity for each product individually. I tried duplicating the code and renaming all variables, but the outputs get trig

Solution 1:

Your code is almost ok, but you cannot have several same ids. id should be unique.

The html markup is also invalid -- <td> look strange without a table structure.

Please see the snippet below to update your code.

$(".incr-btn_mobile").on("click", function(e) {
  var $button = $(this);
  var $parent = $button.parent();
  var oldValue = $parent.find('.quantity').val();

  $parent.find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');

  var newVal = +oldValue + ($button.data('action') === "increase" ? 1 : -1);

  // Don't allow decrementing below 1
  if (!newVal) newVal = +!!$button.addClass('inactive');

  $parent.find('.quantity').val(newVal)
  .end().next('.totalPrice').html("= $" + newVal * 7.99);
  e.preventDefault();

});

.count-input_mobile {
  position: relative;
  max-width: 1000%;
  max-width: 400px;
  margin: 0px 0;
}

.count-input_mobile input {
  width: 100%;
  height: 36.92307692px;
  border: 1px solid #000 border-radius: 2px;
  background: none;
  text-align: center;
}

.count-input_mobile input:focus {
  outline: none;
}

.count-input_mobile .incr-btn_mobile {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 0;
  margin-top: -15px;
  text-decoration: none;
}

.count-input_mobile .incr-btn_mobile:first-child {
  right: auto;
  left: 0;
  top: 46%;
}

.count-input_mobile.count-input-sm {
  max-width: 125px;
}

.count-input_mobile.count-input-sm input {
  height: 36px;
}

.count-input_mobile.count-input-lg {
  max-width: 200px;
}

.count-input_mobile.count-input-lg input {
  height: 70px;
  border-radius: 3px;
}

.button_mobile {
  border: 1px solid #000;
  border-radius: 2px;
  background: none;
  padding: 10px 32px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_0_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" href="#">+</a>
</div>
<div class="totalPrice">= $7.99</div>


<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_5_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" href="#">+</a>
</div>
<div class="totalPrice">= $7.99</div>

Solution 2:

It's because both your result box have the same id : totalPrice, you need to set differents id and set the id in the button as a data-target.

<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" data-target="totalPrice" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_0_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" data-target="totalPrice" href="#">+</a>
</div>

<td>
  <div id="totalPrice">=$7.99</div>
</td>

<div class="count-input_mobile space-bottom">
  <a class="incr-btn_mobile" data-action="decrease" data-target="totalPrice2" href="#">–</a>
  <input class="quantity" id="ShowButton_value_1_5_mobile" type="text" name="quantity" value="1" />
  <a class="incr-btn_mobile" data-action="increase" data-target="totalPrice2" href="#">+</a>
</div>
</td>
<td>
  <div id="totalPrice2">= $7.99</div>
</td>

and the js :

$(".incr-btn_mobile").on("click", function(e) {
      var $button = $(this);
      var oldValue = $button.parent().find('.quantity').val();
      $button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
      if ($button.data('action') == "increase") {
        var newVal = parseFloat(oldValue) + 1;
      } else {
        // Don't allow decrementing below 1
        if (oldValue > 1) {
          var newVal = parseFloat(oldValue) - 1;
        } else {
          newVal = 1;
          $button.addClass('inactive');
        }
      }
      $button.parent().find('.quantity').val(newVal);

      var cakePrice = newVal;
      var divobj = document.getElementById($button.attr('data-target'));
      divobj.style.display = 'block';
      divobj.innerHTML = "= $" + (cakePrice) * 7.99;
      e.preventDefault();
    });