JSFiddle - React, Tailwind, and code Playground

by FERMIS

HTML

<div>
  Qty: 
  <input id="qty" type="number" />
  Product: 
  <select id="product1">
    <option value=""></option>
  </select>
  Option: 
  <select id="option1">
    <option value="">Please Select a Product</option>
  </select>
  <input id="rush" type="checkbox" /> Rush?
  <br>
  <button id="calculate-cost">Calculate Cost</button>
</div>
<div>
  <span>Cost: <span id="cost"></span></span>
</div>

JavaScript

'use strict';

// all information about the products
var products = {
	"Apple": {
  	"value": 7,
  	"options": [
    	{"option": "Gala", "value": 1},
      {"option": "Fuji", "value": 2},
      {"option": "Red Delicious", "value": 3},
      {"option": "Cortland", "value": 4}
    ]
  },
  "Banana": {
  	"value": 9,
    "options": [
        {"option": "Cavendish", "value": 1},
        {"option": "Plantain", "value": 2},
        {"option": "Saba", "value": 3}
    ]	
  },
  "Pear": {
  	"value": 17,
    "options": [
        {"option": "Asain", "value": 4},
        {"option": "European", "value": 7},
        {"option": "Pyrus communis", "value": 12},
    ]
  }
};
var rushCost = 500;

emptyElement(document.getElementById('product1'));
var select = document.getElementById("product1");
var option = document.createElement("option");
option.text = "Please Select a Product";
option.value = "";
select.appendChild(option);

// creates the Product dropdown based on the products object above
for(var product in products){
	// ship prototype attributes of the products object
	if(!products.hasOwnProperty(product)) continue;
  
  var option = document.createElement("option");
  option.text = product;
  option.value = product;
  select.appendChild(option);
}

// populates the second dropdown when the first one changes
document.getElementById("product1").addEventListener("change", function(e){
var product = document.getElementById("product1");

  emptyElement(document.getElementById("option1"));
  if(typeof(products[product.value]) !== "undefined"){
  	var select = document.getElementById("option1");
    var option = document.createElement("option");
    option.text = "Please Select an Option";
    option.value = "";
    select.appendChild(option);
    for(var opt in products[product.value].options){
      // skip prototype attributes
      if(!products[product.value].options.hasOwnProperty(opt)) continue;


      var option = document.createElement("option");
      option.text =...