Dynamic second quantity increase issue affecting to the first quantity

Question

I have a product section and fields are "Product name", "Qty" and "Add more". The first user enters the product name and then the user enters the quantity (User can enter directly quantity in the input field or else can click on plus sign to increase the quantity or decrease the quantity)

let's talk about "Add more" field

If user want multiple products then he/she should click on "Add more button" and it will display the same field which is "Product name", "Qty" and "Remove".

Now my issue is, When the user wants multiple products then I am getting the issue on quality. I am increasing the quantity of the second product but that increases the quantity of the first product. I know, this issue occurs because of the id of the input filed.

This is my first product name and quantity

Now I added one more product name and increase the quantity 4. so my quantity is changing on the first product.

function increaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number').value = value;
}

function decreaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number').value = value;
}

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".add_row"); //Fields wrapper
  var add_button = $(".add_row_click");

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    //alert("hellow");
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      var id_counter = 1;
      $(wrapper).append('<div class="custom_fields"><input type="text" name="product" placeholder="Enter product name"><div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div><input type="number" id="number" value="0" /><div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    //$(this).parent('custom_fields').remove();
    $(this).closest('.custom_fields').remove();

    x--;
  })
});

form {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
}

.value-button {
  display: inline-block;
  border: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  padding: 11px 0;
  background: #eee;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.value-button:hover {
  cursor: pointer;
}

form #decrease {
  margin-right: -4px;
  border-radius: 8px 0 0 8px;
}

form #increase {
  margin-left: -4px;
  border-radius: 0 8px 8px 0;
}

form #input-wrap {
  margin: 0px;
  padding: 0px;
}

input#number {
  text-align: center;
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 40px;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn_row {
  transition: .2s;
  width: 100%;
  font-weight: normal;
  font-size: 14px;
  font-family: Muli;
  outline: none;
  border: none;
  padding: 7px;
  background: #f4f2f3;
  color: #999;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
}

.btn_row span {
  font-size: 18px;
}

.add_row_click {
  background: #a8dabf;
}

<form>
  <div class="add_row">
    <input type="text" name="product" placeholder="Enter product name">
    <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
    <input type="number" id="number" value="0" />
    <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
    <div class="btn_row add_row_click"> <span> +  </span> Add </div>

  </div>
</form>

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

Yes, IDs must be unique to the document. Use classes instead and the same kind of `closest` logic (paired with a `find`) as you're using in your remove logic. — Heretic Monkey, Jul 30 '18 at 19:07
Possible duplicate of [jQuery id selector works only for the first element](https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element) — Heretic Monkey, Jul 30 '18 at 19:15

score 1 · Accepted Answer · answered Jul 30 '18 at 19:01

You need to use var x = 1; //initlal text box count from your code to add new input box.

Here's solution for the same -

function increaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number' + n).value = value;
}

function decreaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number' + n).value = value;
}

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".add_row"); //Fields wrapper
  var add_button = $(".add_row_click");

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    //alert("hellow");
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      var id_counter = 1;
      $(wrapper).append('<div class="custom_fields"><input type="text" name="product" placeholder="Enter product name"><div class="value-button" id="decrease" onclick="decreaseValue(' + x + ')" value="Decrease Value">-</div><input type="number" id="number' + x + '" value="0" /><div class="value-button" id="increase" onclick="increaseValue(' + x + ')" value="Increase Value">+</div> <div class="btn_row remove_field"> <span> - </span> Remove  </div></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    //$(this).parent('custom_fields').remove();
    $(this).closest('.custom_fields').remove();

    x--;
  })
});

form {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
}

.value-button {
  display: inline-block;
  border: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  padding: 11px 0;
  background: #eee;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.value-button:hover {
  cursor: pointer;
}

form #decrease {
  margin-right: -4px;
  border-radius: 8px 0 0 8px;
}

form #increase {
  margin-left: -4px;
  border-radius: 0 8px 8px 0;
}

form #input-wrap {
  margin: 0px;
  padding: 0px;
}

input#number {
  text-align: center;
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 0px;
  width: 40px;
  height: 40px;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn_row {
  transition: .2s;
  width: 100%;
  font-weight: normal;
  font-size: 14px;
  font-family: Muli;
  outline: none;
  border: none;
  padding: 7px;
  background: #f4f2f3;
  color: #999;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  color: #000;
  font-weight: bold;
}

.btn_row span {
  font-size: 18px;
}

.add_row_click {
  background: #a8dabf;
}

<form>
  <div class="add_row">
    <input type="text" name="product" placeholder="Enter product name">
    <div class="value-button" id="decrease" onclick="decreaseValue(1)" value="Decrease Value">-</div>
    <input type="number" id="number1" value="0" />
    <div class="value-button" id="increase" onclick="increaseValue(1)" value="Increase Value">+</div>
    <div class="btn_row add_row_click"> <span> +  </span> Add </div>

  </div>
</form>

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

Thanks, @Vivek, It's working perfectly. upvote from my side – user9437856 Jul 31 '18 at 05:29 — user9437856, Jul 31 '18 at 05:29

Dynamic second quantity increase issue affecting to the first quantity

1 Answers1