JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" id="orderForm">
  <select  id="itemSize" name='itemSize' onchange="getTotal()"> <!-- query for all data with pid=id of product and category = 'a' so select id and name are dynamic -->
     <option value = "2oz">2oz</option>
     <option value = "4oz">4oz</option>
     <option value = "8oz">8oz</option> <!-- Value is dynamic as is the inner data ie. 2oz, 4oz, etc. can range from sizes, color, metal types, etc. -->
  </select>
  <select id="quantity" name='quantity' onchange="getTotal()">
     <option value = "1">1</option>
     <option value = "2">2</option>
     <option value = "3">3</option>
  </select>
  <select id="metal" name='metal' onchange="getTotal()">
     <option value = "Silver">Silver</option>
     <option value = "Gold">Gold</option>
     <option value = "Platinum">Platinum</option> 
  </select>
</form>
<h3 id="totalPrice"></h3>

JavaScript

var itemSize = new Array();
itemSize["2oz"]=0;
itemSize["4oz"]=10;
itemSize["8oz"]=15;

 var quantity = new Array();
 quantity["1"]=1;
 quantity["2"]=2;
 quantity["3"]=3;

var metalType = new Array();
 metalType["Silver"]=10;
 metalType["Gold"]=20;
 metalType["Platinum"]=30;

function getSizePrice()
{
    var itemSize=0;
    var theForm = document.forms["orderForm"];
     var selectedSize = theForm.elements["itemSize"];
 
    getSizePrice = itemSize[selectedSize.value];
 
    return sizePrice;
}

function getQuantity()
{
    var quantity=0;
    var theForm = document.forms["orderForm"];
    var selectedQuantity = theForm.elements["quantity"];
 
    getQuantity = quantity[selectedQuantity.value];
 
    return finalQuantity;
}

function getMetalType()
{
    var metalType=0;
    var theForm = document.forms["orderForm"];
    var selectedMetalType = theForm.elements["metalType"];
 
    getMetalType = metalType[selectedMetalType.value];
 
    return metalPrice;
}

function getTotal()
{

    var totalPrice = (getMetalType() + getSizePrice()) * getQuantity();
 
    document.getElementById('totalPrice').innerHTML =
                                      "Total Price $"+totalPrice;
 
}