JSFiddle - React, Tailwind, and code Playground

by R

HTML

<form action="/scripts/buynow.php?p=2392448&q=6&srv=1" class="buy-ts-monitor-form" method="post">
  <fieldset>
    <legend>Buy SoftActivity™ TS Monitor</legend>

    <div class="form-item form-type-textfield">
      <label for="servers">Enter a number of monitored Servers: <span class="form-required">*</span></label>
      <input type='button' value='-' class='qtyminus' field='servers' />
      <input type='number' id="servers" name="servers" value="1" class="form-text required" value="1" min="1" class="qty" onkeypress="return event.charCode >= 48 && event.charCode <= 57" title="Number of servers (physical or virtual) where TS Monitor software will be installed"
      />
      <input type='button' value='+' class='qtyplus' field='servers' />
    </div>
    <div class="form-item form-type-checkbox">
      <input type="checkbox" id="edu" name="edu" value="1" class="form-checkbox" />
      <label class="option" for="edu">I'm buying for registered educational or charity organization</label>
    </div>
    <div class="form_total">Total: <span id="total" class="total">99.95</span> <span class="usd">USD</span></div>
    <div class="form-contact softly-hidden"><a class="activity" href="/support/sales/">Contact Us for a Quote</a></div>
    <div class="form-actions form-wrapper" id="edit-actions">
      <input class="element-invisible" type="submit" value="Buy Now" />
      <button type="submit" name="buyNow" id="buyNow" class="form-submit btn-buy" title="Click to Buy the license">Buy Now</button>
      <a class="form-submit btn-buy form-contact  softly-hidden" href="/support/sales/">Contact Us</a>
    </div>
  </fieldset>

</form>

<div class="buytsm">
  <p>
    For other server configurations or any pre-sales questions
    <a class="activity" href="/support/sales/">Contact our sales department now</a>
  </p>
</div>

CSS

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden],
template {
  display: none
}

a {
  background: transparent
}

a:active,
a:hover {
  outline: 0
}

abbr[title] {
  border-bottom: 1px dotted
}

b,
strong {
  font-weight: bold
}

dfn {
  font-style: italic
}

h1 {
  font-size: 2em;
  margin: 0.67em 0
}

mark {
  background: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em
}

sub {
  bottom: -0.25em
}

.clearfix:before {
  content: " ";
  display: table
}

.clearfix:after {
  content: " ";
  display: table;
  clear: both
}

.container:before {
  content: " ";
  display: table
}

.container:after {
  content: " ";
  display: table;
  clear: both
}

.container-fluid:before {
  content: " ";
  display: table
}

.container-fluid:after {
  content: " ";
  display: table;
  clear: both
}

.row:before {
  content: " ";
  display: table
}

.row:after {
  content: " ";
  display: table;
  clear: both
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.pull-right {
  float: right !important
}

.pull-left {
  float: left !important
}

.hide {
  display: none !important
}

.show {
  display: block !important
}

.invisible {
  visibility: hidden
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0
}

.hidden {
  display: none !important
}

.affix {
  position: fixed
}

img {
  border: 0
}

img.img-responsive {
  display: block;
  width: 100% \9;
  max-width: 100%;
 ...

JavaScript

var $form = $('.buy-ts-monitor-form');

if ($form.length == 0) {
  return;
}

var TSMonitorCalculateTotalAndBuyNowURL = function() {
  var tsmDefaultPrices = {
    1: 99.95,
    3: 66.67,
    6: 58.33,
    12: 49.99,
    25: 43.99,
    50: 39.99,
    75: 32.99,
    100: 29.99,
    200: 21.99,
    500: 18.99
  };
  var tsmEducationalPrices = {
    1: 69.95,
    3: 46.66,
    6: 40.82,
    12: 34.99,
    25: 30.79,
    50: 27.99,
    75: 23.09,
    100: 20.99,
    200: 15.93,
    500: 13.29
  };

  // Create USD currency formatter.
  var formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2
  });

  var $form = $('.buy-ts-monitor-form'),
    $servers = $('#servers'),
    $edu = $('#edu'),
    $total = $('#total');

  var serversValue = Math.round(parseFloat($servers.val())) || 0,
    eduValue = $edu.prop('checked'),
    url = '/scripts/buynow.php',
    typeOfLicence = '',
    quantityValueForPrices = 1,
    pricePerUnit = 0;

  $.each(tsmDefaultPrices, function(key, value) {
    if (key <= serversValue) {
      quantityValueForPrices = key;
    }
  });

  if (eduValue === true) {
    typeOfLicence = 2310231;
    pricePerUnit = tsmEducationalPrices[quantityValueForPrices];
  } else {
    typeOfLicence = 3341836;
    pricePerUnit = tsmDefaultPrices[quantityValueForPrices];
  }

  if (serversValue > 20) {
    $('.form_total, .form-submit.btn-buy').hide();
    $('.form-contact').show();
    $form.attr('action', "#");
  } else {
    $('.form_total, .form-submit.btn-buy').show();
    $('.form-contact').hide();
    $total.text(formatter.format(parseFloat(pricePerUnit * serversValue).toFixed(2)));
    url += '?p=' + typeOfLicence + '&srv=' + serversValue;
    $form.attr('action', url);
  }

};

//init after page load
TSMonitorCalculateTotalAndBuyNowURL();

var $servers = $('#servers'),
  $edu = $('#edu');

$($servers).bind("keyup change onwheel mousewheel DOMMouseScroll", function() {
  var serversValue =...