Jquery data update

Question

I have a pertinent question regarding the dynamic update:

I have an order system.

The problem is that the values are not being summed correctly in the click event.

In the first picture I just click on the "+" button and the text box adds the number.

In the second the order value receives all the amount already added.

HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-body">
  <div class="menu-tittle">
</div>
  <div class="quantity">
    <form action="#">
      <div class="pizza-add-sub">
        <input type="text" class="qtdpedidos" />
      </div>
    </form>
  </div>
  <div class="pizza-price"> <span class="pizza">10.00</span>
  </div>
</div>
<p>Valor do Pedido: R$<span class="resultado">0.00</span></p>

JS

 $(".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 total = 0;
var valorPizza = $('.pizza').text().substring(0, $('.pizza').text().indexOf('.'));

Answer 1

	$(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);
	
	 });
	});

<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>
    </form>
  </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>