JSFiddle - React, Tailwind, and code Playground

by EveGeen

HTML

<link rel="stylesheet" href="http://www.carport.com/jqueryui/development-bundle/themes/base/jquery.ui.all.css">
<script src="http://www.carport.com/js/jquery.ui.spinner.js"></script>
<label>Number of Credit Hours: <input class="spinner" type="text" id="f_4" name="f_4" data-spinner='{"min": 0, "max": 42, "step": 

3}' data-default="0" value="3" data-cost="277.00"/></label> 
<br />
<br />
<input type="text" name="f_7-textbooks" value="" />

JavaScript

$('#f_4').spinner();

$('.ui-spinner-button').click(function() { $(this).siblings('input').change(); });

$('#f_4').spinner().change(function() {
    var f4Val = $('#f_4').val();
    var calcValue = (f4Val/3)*100;
    var formatValue = calcValue.toFixed(2);
    $('input[name="f_7-textbooks"]').val(formatValue);
});