JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vc_column-inner">
	<div class="wpb_wrapper">

		<div class="wpb_text_column wpb_content_element ">
			<div class="wpb_wrapper">
				<p class="cost-heading">See For Yourself</p>

			</div>
		</div>

		<div class="wpb_text_column wpb_content_element ">
			<div class="wpb_wrapper">
				<div id="calc-top" class="behalf-calc">
					<form onsubmit="return false">
						<span style="margin=right: 10px;">I need to place an order for</span>
						<div class="input-group">
							<span style="color:#02A093;">$</span>
							<input type="text" step="1.0" id="orderAmt" onpaste="return false" autocomplete="off" class="number" data-com.agilebits.onepassword.user-edited="yes">
						</div>
						<span style="margin-left: 15px;"><br class="mobile-break">I would like to spread my costs for this order over</span>
						<select name="terms-days" id="duration">
							<option selected="selected" disabled="disabled" value=""></option>
							<option value="180">180 days</option>
							<option value="150">150 days</option>
							<option value="120">120 days</option>
							<option value="90">90 days</option>
							<option value="60">60 days</option>
							<option value="30">30 days</option>
						</select>
						<span>and have my account debited</span>
						<select name="debit-term" id="debitFreq">
							<option selected="selected" disabled="disabled" value=""></option>
							<option value="7">weekly</option>
							<option value="30">monthly</option>
						</select>
						<span>.*</span>
					</form>
				</div>
			</div>
		</div>

		<div id="calc-bottom" class="behalf-calc">
<span>I will advance your order payment today, and debit you</span><div class="calc-output-wrapper"><span class="calc-output">$</span><span class="calc-output" id="outputAmt"></span><span>/</span><span id="outputTerm1" class="calc-output">week</span></div><span>for</span><div class="calc-output-wrapper"><span class="calc-output" id="numPayments"></span>&nbsp;&nbsp;<span class="calc-output"...

JavaScript

jQuery( document ).ready( function( $ ) {
		// SHOW OUTPUT DIV ONLY WHEN ALL FIELDS ARE COMPLETED
		$( '#calc-top' ).bind( 'keyup change', function() {
			var orderAmount = $( '#orderAmt' ).val().replace( '', ',' );
			if ( orderAmount !== "" && $( "#duration option:selected" ).val() !== "" && $( "#debitFreq option:selected" ).val() !== "" ) {
				$( 'div#calc-bottom' ).css( 'display', 'block' );
			} else {
				$( 'div#calc-bottom' ).css( 'display', 'none' );
			}
		} );
	} );

jQuery(document).ready(function($){
	$("#orderAmt").keyup(function(event) {
		// skip for arrow keys
		if (event.which >= 37 && event.which <= 40) {
			event.preventDefault();
		}
		var $this = $(this);
		var num = $this.val().replace(/,/gi, "");
		var num2 = num.split(/(?=(?:[0-9]{3})+$)/).join(",");
		console.log(num2);
		// the following line has been simplified. Revision history contains original.
		$this.val(num2);
	});
	});
  // end jQuery

	// CALCULATE USER INPUT AND WRITE OUTPUT TO HTML ELEMENTS
	function calculate() {
		var orderAmt = parseFloat(document.getElementById( "orderAmt" ).value.replace(/,/g, ''));
		var duration = document.getElementById( "duration" ).value || 0;
		var debitFreq = document.getElementById( "debitFreq" ).value || 0;
		var outputAmt = document.getElementById( 'outputAmt' ) || 0;
		var numPayments = document.getElementById( 'numPayments' ) || 0;

		// CALCULATE NUMBER OF PAYMENTS
		if ( debitFreq == 7 ) {
			numPayments = Math.floor( duration / 7 );
		} else if ( debitFreq == 30 ) {
			numPayments = Math.floor( duration / 30 );
		}
		document.getElementById( 'numPayments' ).innerHTML = numPayments;

		// CALCULATE PAYMENT AMOUNT
		var stepA = (orderAmt / numPayments);
		var stepB = Math.floor( (((15 / 1000) * (duration / 360)) * 12) * orderAmt ) || 0;
		var stepC;
		if ( debitFreq == 7 ) {
			stepC = 0.10;
			//} else if (debitFreq == 30) {
			//stepC = 0.05;
		} else {
			stepC = 0;
		}
		var stepD = 0;
		//if ((duration == 30) && (debitFreq == 30))...