JSFiddle - React, Tailwind, and code Playground

HTML

<form name="costcalculator">
  <div class="package-type">
    <select name="packageType" id="packageType" onchange="setMonths(this.value)">
      <option value="gold">Gold</option>
      <option value="silver">Silver</option>
      <option value="bronze">Bronze</option>
    </select>
  </div>

  <div class="months">
    <select name="months" id="months">
      <option value="1">1 month</option>
      <option value="2">2 months</option>
      <option value="3">3 months</option>
      <option value="4">4 months</option>
      <option value="5">5 months</option>
      <option value="6">6 months</option>
      <option value="7">7 months</option>
      <option value="8">8 months</option>
      <option value="9">9 months</option>
      <option value="10">10 months</option>
      <option value="11">11 months</option>
      <option value="12">12 months</option>
    </select>
  </div>
  
  <button type="button" onclick="calculatePrice()">Calculate</button>
  <div id="price"></div> 
</form>

JavaScript

var costs = {
	'gold': {'basePrice': 199.99, 'pricePerMonth' : 99.5, 'maxMonths': 12},
  'silver': {'basePrice': 150, 'pricePerMonth' : 75, 'maxMonths': 12},
  'bronze': {'basePrice': 75, 'pricePerMonth' : 37.5, 'maxMonths': 2}
};

function setMonths(package)
{
	var maxMonths = costs[package].maxMonths;
  document.getElementById("months").innerHTML = ''; // Clear all options
  for (var i = 1; i<=maxMonths; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i +  (i > 1 ? ' months' : ' month');
    document.getElementById('months').appendChild(opt);
	}
}

function calculatePrice()
{
	var package = document.getElementById('packageType').value;
  var months = document.getElementById('months').value;
  var price = costs[package].basePrice + (costs[package].pricePerMonth * (months - 1));
  document.getElementById('price').innerHTML = price;
}