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 1if (!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: 0px0;
}

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

.count-input_mobileinput: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-sminput {
  height: 36px;
}

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

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

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="count-input_mobile space-bottom"><aclass="incr-btn_mobile"data-action="decrease"href="#">–</a><inputclass="quantity"id="ShowButton_value_1_0_mobile"type="text"name="quantity"value="1" /><aclass="incr-btn_mobile"data-action="increase"href="#">+</a></div><divclass="totalPrice">= $7.99</div><divclass="count-input_mobile space-bottom"><aclass="incr-btn_mobile"data-action="decrease"href="#">–</a><inputclass="quantity"id="ShowButton_value_1_5_mobile"type="text"name="quantity"value="1" /><aclass="incr-btn_mobile"data-action="increase"href="#">+</a></div><divclass="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.

<divclass="count-input_mobile space-bottom"><aclass="incr-btn_mobile"data-action="decrease"data-target="totalPrice"href="#">–</a><inputclass="quantity"id="ShowButton_value_1_0_mobile"type="text"name="quantity"value="1" /><aclass="incr-btn_mobile"data-action="increase"data-target="totalPrice"href="#">+</a></div><td><divid="totalPrice">=$7.99</div></td><divclass="count-input_mobile space-bottom"><aclass="incr-btn_mobile"data-action="decrease"data-target="totalPrice2"href="#">–</a><inputclass="quantity"id="ShowButton_value_1_5_mobile"type="text"name="quantity"value="1" /><aclass="incr-btn_mobile"data-action="increase"data-target="totalPrice2"href="#">+</a></div></td><td><divid="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 1if (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();
    });