JSFiddle - React, Tailwind, and code Playground
HTML
<div id="cartform" class="giftcard"><form action="#" method="post"><input type="hidden" name="oa" value="AddItem" /> <input type="hidden" name="ua" /> <input type="hidden" name="pid" value="10" />
<p>Qty</p>
<select id="oa_quantity" name="oa_quantity" size="1" onchange=""> <option selected="selected" 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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option></select>
<div class="clear"> </div>
<p>Amount</p>
<div class="radioleft">
<div class="col"><input type="radio" name="oa_id" value="GiftCard025" checked="checked" /> <span>$25</span> <input type="radio" name="oa_id" value="GiftCard040" /> <span>$40</span> <input type="radio" name="oa_id" value="GiftCard050" /> <span>$50</span></div>
<div class="col"><input type="radio" name="oa_id" value="GiftCard075" /> <span>$75</span> <input type="radio" name="oa_id" value="GiftCard100" /> <span>$100</span> <input type="radio" name="oa_id" value="GiftCard150" /> <span>$150</span></div>
<div class="col"><input type="radio" name="oa_id" value="GiftCard200" /> <span>$200</span> <input type="radio" name="oa_id" value="GiftCard250" /> <span>$250</span> <input type="radio" name="oa_id" value="GiftCard500" /> <span>$500</span></div>
</div>
<div class="clear"> </div>
<p>TOTAL</p>
<span...
JavaScript
$(document).ready(function() {
$('#cartform.giftcard select#oa_quantity').change(function() {
calculateGiftCardTotal();
});
$('#cartform.giftcard input[type=radio][name=oa_id]').change(function() {
calculateGiftCardTotal();
});
});
function calculateGiftCardTotal() {
var amountArray = new Array();
amountArray['GiftCard025'] = 25;
amountArray['GiftCard040'] = 40;
amountArray['GiftCard050'] = 50;
amountArray['GiftCard075'] = 75;
amountArray['GiftCard100'] = 100;
amountArray['GiftCard150'] = 150;
amountArray['GiftCard200'] = 200;
amountArray['GiftCard250'] = 250;
amountArray['GiftCard500'] = 500;
var quantity = $('#cartform select#oa_quantity').val();
var giftcard = $('#cartform input[type=radio][name=oa_id]:checked').val();
var amount = amountArray[giftcard];
var total = quantity * amount;
$('#wellness_gift_card_total').html('$' + total + '.00');
}