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' ).on( 'input change', toggleResult);
  function toggleResult() {
    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' );
    }
  }   
  // initially hide
  toggleResult();

	$("#orderAmt").on('blur', function(event) {
    // DON'T skip arrow keys: it is user-unfriendly
    // Just format the input when user exits it
    var num = $(this).val().replace(/[^\d.]/gi, "")
    	.replace(/\B(\d{3})(?=(?:\d{3})*(?:\.|$))/g, ',$1');
    $(this).val(num);
  });
	$("#orderAmt").on('focus', function(event) {
    // Remove format from the input when user enters it
    var num = $(this).val().replace(/[^\d.]/gi, "");
    $(this).val(num);
  });
});
// end jQuery

// CALCULATE USER INPUT AND WRITE OUTPUT TO HTML ELEMENTS
function calculate() {
  var orderAmt = parseFloat(document.getElementById( "orderAmt" ).value.replace(/[^\d.]/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 {
    stepC = 0;
  }
  var stepD =...