Change the quantity and change the final value of the cart

Colleagues,

I have this cart:

Iwouldliketomakewhenaddingordecreasingthecartquantity(img1),changethesubtotalandtotalpurchase(img2and3)withoutrefreshonthepage.ThecodeIhavefromimg1followsbelow:

Thevaluesarestoredasfollows:

<tdclass="invert">R$<span id="produto">200,00</span></td>
<td class="invert">R$<span id="produto">270,00</span></td>
<td class="invert">R$<span id="produto">212,00</span></td>

The quantity buttons are as below:

   <div class="quantity">
      <div class="quantity-select">
         <div class="entry value-minus">&nbsp;</div>
         <div class="entry value"><span>1</span></div>
       <div class="entry value-plus active">&nbsp;</div>
      </div>
    </div> 
       <script>
        $('.value-plus').on('click', function(){
        var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10)+1;
        if(newVal < <?php echo $estoque; ?>) divUpd.text(newVal);
        });

        $('.value-minus').on('click', function(){
        var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10)-1;
        if(newVal>=1) divUpd.text(newVal);
        });
        </script>

I was able to change the total amount by adding quantity by changing this line:

$('.value-plus').on('click', function(){
var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10)+1;
if(newVal < <?php echo $numero; ?>) divUpd.text(newVal);
  valor = document.getElementById("produto").innerHTML;
  trocar = valor.replace(",",".");
  valorTotal = trocar * newVal;
  //alert(valorTotal);
  document.getElementById("total").innerHTML = "R$"+valorTotal.toFixed(2);
});

But when I change the quantity for example of product 1 (200.00), it multiplies and changes the value, but when I change product 2 (270.00), it deletes the value of product 1 and so does product 3.