JSFiddle - React, Tailwind, and code Playground

by devful_rs14

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<p>1. Enter your bid: <input name="lotValue" id="lotValue" type="number" class="form-control" /></p>

<p id="buyersPremium">The Buyers Premium (inc VAT) is £<span class="buyersPremiumNumber"></span></p>

<br>

<div class="biddingMethods">
<p>2. Choose a live bidding method.</p>
  <label><input type="radio" name="group1" value="0" checked>Type 1 (£0)</label>
	<label><input type="radio" name="group1" value="3">Type 2 (£3)</label>
	<label><input type="radio" name="group1" value="5">Type 3 (£5)</label>
	<label><input type="radio" name="group1" value="6">Type 4 (£6)</label>
  
  <p id="liveBiddingFee">The Live Bidding Fee is £<span id="price"></span></p>
</div>

<br>

<p id="totalBid">Total £<span class="totalBidNumber"></span></p>

JavaScript

$(document).ready(function() {

	var biddingFee;
	var $lotValue      = $("#lotValue"),
	    $bid           = $("#totalBid"),

	    $buyersPremium = $("#buyersPremium"),
	    $liveBiddingFee = $("#liveBiddingFee")
		

  $('input[type=radio][name=group1]').change(function() {
    if (this.value == '0') {
      biddingFee = 0;
    } else if (this.value == '3') {
      biddingFee = 3;
    } else if (this.value == '5') {
      biddingFee = 5;
    } else if (this.value == '6') {
      biddingFee = 6;
    }
  });

  $lotValue.keyup(function(e){
    if (e.which == 13) {
      return;
    }

    var lotValue = parseFloat($lotValue.val()),
      	bid = lotValue*0.24;
    
    if (isNaN(bid) || isNaN(lotValue)) {
      $bid.hide();
      return;
    }

    var bidValue = lotValue+bid;

    $('.line').hide();

    $buyersPremium.fadeIn().find(".buyersPremiumNumber").text((bid).toFixed(2));
    
    $bid.fadeIn().find(".totalBidNumber").text((bidValue).toFixed(2));
  }); 
});