Change the total value on changing the selection to find total - php

Question

I am trying to get the total amount for the a variety of tickets that are available. from the select box, the user can chose the number of tickets he wants. in the end, the total amount is getting displayed. My issue is, on changing the selection of number of tickets, it is getting added to the previous total. i want to deduct it, and then add the correct amount. i have this running code.
This is the html i have.
<form>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>OAP</label>
</div>
<div class="col-xs-12 col-sm-4">
<select class="venet-stock" data-price="20">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
</select>
</div>
<div class="col-xs-12 col-sm-4">
<p class="number">
£<span>20</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>General</label>
</div>
<div class="col-xs-12 col-sm-4">
<select class="venet-stock" data-price="35">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
</select>
</div>
<div class="col-xs-12 col-sm-4">
<p class="number">
£<span>35</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>Concession</label>
</div>
<div class="col-xs-12 col-sm-4">
<select class="venet-stock" data-price="50">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
</select>
</div>
<div class="col-xs-12 col-sm-4">
<p class="number">
£<span>50</span>
</p>
</div>
</div>
<p class="push h20"></p>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>Total</label>
</div>
<div class="col-xs-12 col-sm-4">
<p class="total">
£<span id="price-total">50</span>
</p>
</div>
This is my Jquery code.
var price_total = 0;
jQuery( '.venet-stock' ).change(function() {
price = jQuery(this).attr('data-price');
guest = jQuery( this ).val();
price_total += guest*price;
jQuery( '#price-total').text( price_total );
});
Thanks in advance.

Answer 1

Working Fiddle https://jsfiddle.net/t3vs4dgx/
HTML Code. Add only a Zero option to every dropdown.
<form>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>OAP</label>
</div>
<div class="col-xs-12 col-sm-4">
<select class="venet-stock" data-price="20">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="col-xs-12 col-sm-4">
<p class="number">£<span>20</span></p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>General</label>
</div>
<div class="col-xs-12 col-sm-4">
<select class="venet-stock" data-price="35">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="col-xs-12 col-sm-4">
<p class="number">£<span>35</span></p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>Concession</label>
</div>
<div class="col-xs-12 col-sm-4">
<select class="venet-stock" data-price="50">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="col-xs-12 col-sm-4">
<p class="number">£<span>50</span></p>
</div>
</div>
<p class="push h20"></p>
<div class="row">
<div class="col-xs-12 col-sm-4">
<label>Total</label>
</div>
<div class="col-xs-12 col-sm-4">
<p class="total">£<span id="price-total">0</span></p>
</div>
</div>
</form>
JS Code. Going through all selections when one is changed and add price_total for this run
$( '.venet-stock' ).change(function() {
var price_total = 0;
$( '.venet-stock' ).each(function(i,e){
price = $(e).attr('data-price');
guest = $(e).val();
price_total += guest*price;
});
jQuery( '#price-total').text( price_total );
});