JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<script src="https://cdn.rawgit.com/plentz/jquery-maskmoney/master/dist/jquery.maskMoney.min.js"></script>
<p>
  <input type="text" name="wpp-summ" value=""> СУММА</p>
<select name="wpp-month" id="">
  <option value="" disabled="disabled" selected>Selected Monthly</option>
</select>
<div id="rate"></div>
<input type="text" name="wpp-monthley" value="">

JavaScript

jQuery(function($) {

  var $data = {
    one: {
      month: [6, 12],
      rate: 172.20
    },
    twoo: {
      month: [6, 12, 18, 24],
      rate: 148.20
    },
    three: {
      month: [6, 12, 18, 24, 30, 36],
      rate: 148.20
    },
    four: {
      month: [6, 12, 18, 24, 30, 36],
      rate: 124.20
    },
    five: {
      month: [6, 12, 18, 24, 30, 36, 48],
      rate: 88.20
    }
  }

  $('[name="wpp-summ"]').maskMoney({
    allowNegative: true,
    thousands: ''
  });
  $(document).on('change', '[name="wpp-summ"]', function() {
    var $val = parseFloat($(this).val(), 10),
      $options = '<option value="">Selected Monthly</option>';

    switch (true) {
      case ($val <= 500):
        $month = $data.one.month;
        break;
      case ($val > 500 && $val <= 2000):
        $month = $data.twoo.month;
        break;
      case ($val > 2000 && $val <= 2500):
        $month = $data.three.month;
        break;
      case ($val > 2500 && $val <= 5000):
        $month = $data.four.month;
        break;
      case ($val > 5000):
        $month = $data.five.month;
        break;
      default:
        $month = '';
        break;
    }

$('[name="wpp-monthley"]').val('');
    $.each($month, function($k, $v) {
      $options = $options + '<option value="' + $v + '">' + $v + '</option>';
    });

    $('[name="wpp-month"]').html($options);
    $('#rate').html('');

  });


  $(document).on('change', '[name="wpp-month"]', function() {
    var $val = parseFloat($('[name="wpp-summ"]').val(), 10),
      $month = $(this).val();

    switch (true) {
      case ($val <= 500):
        $rate = $data.one.rate;
        break;
      case ($val > 500 && $val <= 2000):
        $rate = $data.twoo.rate;
        break;
      case ($val > 2000 && $val <= 2500):
        $rate = $data.three.rate;
        break;
      case ($val > 2500 && $val <= 5000):
        $rate = $data.four.rate;
        break;
      case ($val > 5000):
        $rate = $data.five.rate;
        break;
    ...