Repetition of JQUERY items

Question

Good afternoon, everyone,

There was a problem, I had a question about summation system with JQUERY, but I would like you to analyze what is wrong in my code because it error (Nan) with multiple text boxes, what I did is what php generates like a menu only I can’t add the orders independently.

Here is the js Riddle: https://jsfiddle.net/6mkzzvqz/11/

HTML

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

<form action="#">
<div class="media-body">
  <div class="menu-tittle">
</div>
  <div class="quantity">

      <div class="pizza-add-sub">
        <input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
      </div>

  </div>
  <div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
  </div>
</div>
<div class="quantity">

      <div class="pizza-add-sub">
        <input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
      </div>

  </div>
  <div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
  </div>
</div>
<div class="quantity">

      <div class="pizza-add-sub">
        <input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
      </div>

  </div>
  <div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
  </div>
</div>
<div class="quantity">

      <div class="pizza-add-sub">
        <input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
      </div>

  </div>
  <div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
  </div>
</div>
</form>
<p>Valor do Pedido: R$<span id="resultado" class="resultado">0.00</span></p> 

JQUERY

$(document).ready(function() {

        $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
        $(".qty-pizza").on("click", function() {

        var $button = $(this);
        var oldValue = $button.parent().find("input").val();
        if ($button.text() == "+") {
          var newVal = parseFloat(oldValue) + 1;
        } else {
          // Don't allow decrementing below zero
             if (oldValue > 0) {
                var newVal = parseFloat(oldValue) - 1;
                } else {
                newVal = 0;
              }
        }
        $button.parent().find("input").val(newVal);
        var v1 = $('#item1 span').text();
        var v2 = Number(document.getElementById("qtdpedidos").value);
        document.getElementById("resultado").innerHTML = parseFloat(v1 * v2).toFixed(2);

     });
    });

Answer 1

tries to turn v1 into number as well:

var v1 = Number($('#item1 span').html());

Answer 2

You should not have so many elements with the same ID, as is the case of: #qtdpedidos and #item1. Ids must be unique, when it is necessary to have more elements with a common identification, use classes or attributes.

Then you can browse with a each, as a suggestion, all the items:

var valorTotal = 0;
$.each($(".quantity"), function(){
      valorTotal += Number($(this).find(".qtdpedidos").val()) * Number($(this).find(".item span").html())
});

//#details changed to: . qtdpedidos;

//#item1 changed to: . item;

Then you can apply the Total value with the format you want for the final result. #result

Just remembering, I’m sure it’s not the case, but the final calculation should be done on the server, reverting the value of the items, otherwise, malicious users may change the value on the page. (=