JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<form>
    <fieldset class="calculator">
        <legend>Basic</legend>
        <label>Required Level</label>
        <input type="text" name="requiredlevel" />
        <label>Sell Price (NPC)</label>
        <input type="text" name="sellprice" />
        <label>Durability</label>
        <input type="text" name="durability" />
    </fieldset>
    <fieldset class="calculator">
        <legend>Damage</legend>
        <label>Damage (min-max)</label>
        <input type="text" name="damage" />
        <label>Attacks Per Second</label>
        <input type="text" name="attackpersecond" />
    </fieldset>
    <fieldset class="calculator">
        <legend>Armor</legend>
        <label>Armor</label>
        <input type="text" name="armor" />
    </fieldset>
    <fieldset class="calculator">
        <legend>Magic Properties</legend>
        <label>#1</label>
        <input type="text" class="prop1" /><select class="prop1"><option name="criticalhitdamage">% Critical Hit Damage</option></select>
        <label>#2</label>
        <input type="text" class="prop2" /><select class="prop2"><option name="criticalhitdamage">% Critical Hit Damage</option></select>
        <label>#3</label>
        <input type="text" class="prop3" /><select class="prop3"><option name="criticalhitdamage">% Critical Hit Damage</option></select>
        <label>#4</label>
        <input type="text" class="prop4" /><select class="prop4"><option name="criticalhitdamage">% Critical Hit Damage</option></select>
        <label>#5</label>
        <input type="text" class="prop5" /><select class="prop5"><option name="criticalhitdamage">% Critical Hit Damage</option></select>
        <label>#6</label>
        <input type="text" class="prop6" /><select class="prop6"><option name="criticalhitdamage">% Critical Hit Damage</option></select>
    </fieldset>
    <fieldset class="commodity">
        <legend>Commodity</legend>
        <label>Gems</label>
        <select class="commodity"><option name="blank">...

JavaScript

var props = {
    //Magic
    allresistance: { weight: 5, name: "All Resistance", category: "Magic Properties", exponent: true, select: true },
    arcandepoweroncrit: { weight: 1, name: "Arcane Power on Crit", category: "Magic Properties", exponent: true, select: true },
    arcaneresistance: { weight: 5, name: "Arcane Resistance", category: "Magic Properties", exponent: true, select: true },
    armor: { weight: 5, name: "Armor", category: "Magic Properties", exponent: true, select: true },
    attackspeed: { weight: 8, name: "Attack Speed %", category: "Magic Properties", exponent: true, select: true },
    barbarianskillbonusbash: { weight: 5, name: "Barbarian Skill Bonus: Bash", category: "Magic Properties", exponent: true, select: true },
    barbarianskillbonuscleave: { weight: 5, name: "Barbarian Skill Bonus: Cleave", category: "Magic Properties", exponent: true, select: true },
    barbarianskillbonusfrenzy: { weight: 5, name: "Barbarian Skill Bonus: Frenzy", category: "Magic Properties", exponent: true, select: true },
    barbarianskillbonushammeroftheancients: { weight: 5, name: "Barbarian Skill Bonus: Hammer of the Ancients", category: "Magic Properties", exponent: true, select: true },
    barbarianskillbonusoverpower: { weight: 5, name: "Barbarian Skill Bonus: Overpower", category: "Magic Properties", exponent: true, select: true },    
    barbarianskillbonusrend: { weight: 5, name: "Barbarian Skill Bonus: Rend", category: "Magic Properties", exponent: true, select: true },
    barbarianskillbonusrevenge: { weight: 5, name: "Barbarian Skill Bonus: Revenge", category: "Magic Properties", exponent: true, select: true },
    barbarianskillbonusseismic: { weight: 5, name: "Barbarian Skill Bonus: Seismic Slam", category: "Magic Properties", exponent: true, select: true },
    barbarianskillbonusweaponthrow: { weight: 5, name: "Barbarian Skill Bonus: Weapon Throw", category: "Magic Properties", exponent: true, select: true },
   ...