JSFiddle - React, Tailwind, and code Playground
HTML
<input id='amountShown' name='amountShown' type='text' disabled="disabled" />
<input id='amount' name='amount' type='hidden' />
<br /><br />
<h3>Package</h3>
<select id='package' name='package'>
<option name='service' value='11900'>$119 - 1 Bedroom Apt</option>
<option name='service'value='14900'>$149 - 2 Bedroom Apt</option>
<option name='service' value='17900'>$179 - 3 Bedroom Apt/Townhome</option>
<option name='service' value='20900'>$209 - 4 Bedroom Home</option>
<option name='service' value='23900'>$239 - 5 Bedroom Home</option>
<option name='service' value='26900'>$269 - 6 Bedroom Home</option>
</select>
<br />
<h3>Extras</h3>
<input type="checkbox" name="oven" class="extra" data-amount="2000" /> $20 Oven<br />
<input type="checkbox" name="fridge" class="extra" data-amount="2000" /> $20 Refrigerator<br />
<input type="checkbox" name="windows" class="extra" data-amount="5000" /> $50 Windows<br />
JavaScript
(function($){
doTotal();
$('#package').change(function(){
doTotal();
});
$('.extra').change(function(){
doTotal();
});
function doTotal() {
var base = parseInt($('#package').val());
var extra = 0;
$('input.extra:checked').each(function(){
var amount = parseInt( $(this).data('amount') );
extra += parseInt( amount );
});
var total = base + extra;
$('#amount').val(total);
}
})(jQuery);