JSFiddle - React, Tailwind, and code Playground
HTML
<form id="bricks" method="post" accept-charset="UTF-8" action="https://pay1.plugnpay.com/payment/pay.cgi">
<input type="hidden" value="[email protected]" id="edit-publisher-email" name="publisher-email"/>
<input type="hidden" value="ap1741725" id="edit-publisher-name" name="publisher-name"/>
<input type="hidden" value="buyabrick" id="edit-order-id" name="order-id"/>
<input type="hidden" value="Visa,Mastercard,Amex,Discover" id="edit-card-allowed" name="card-allowed"/>
<input type="hidden" value="0" id="edit-shipinfo" name="shipinfo"/>
<input type="hidden" value="$" id="edit-currency-symbol" name="currency_symbol"/>
<input type="hidden" value="1" id="edit-easycart" name="easycart"/>
<input type="hidden" value="glimmerpaytemplate" id="edit-paytemplate" name="paytemplate"/>
<input type="hidden" value="Notification for donation to A Glimmer of Hope campaign (Buy a Brick. Build a School.)" id="edit-subject" name="subject"/>
<input type="hidden" value="Receipt for donation to A Glimmer of Hope campaign (Buy a Brick. Build a School.)" id="edit-subject-email" name="subject-email"/>
<input type="hidden" value="Thank you for your donation to the 'Buy a Brick. Build a School.' campaign. A Glimmer of Hope Foundation is a 501(c)(3) non-operating private foundation. No goods or services will be provided in exchange for your donation. Your donation is tax deductible to the extent allowed by law. Please consult your tax advisor as to the deductibility of your donation." id="edit-message" name="message"/>
<input type="hidden" value="A Glimmer of Hope Donation (Buy a Brick. Build a School.)" id="edit-description1" name="description1"/>
<input type="hidden" value="20" id="edit-col1-cost1" name="cost1"/>
<input type="hidden" value="11196-265" id="edit-item1" name="item1"/>
<input type="hidden" value="1" id="edit-quantity1" name="quantity1"/>
<input type="hidden" value="" id="edit-acct-code2"...
CSS
#bricks {
width: 440px;
border: 3px solid #ddd;
margin: 20px;
background: #eee;
}
.cond {
display: none;
}
JavaScript
var $quantity = $('#quantity'),
$total = $('#total'),
$gift = $('#gift'),
$cond = $('.cond');
$quantity.bind('keyup keydown',function(){
$total.html('$' + $quantity.val() * 20);
});
$gift.change(function(){
$cond.toggle().find('input').val('').removeAttr('checked');
});