JSFiddle - React, Tailwind, and code Playground

by Kerr Almario

HTML

<select name="devicelist" id="devicelist" style="width:350px;" onchange="changecat1(this.value);">
  <option value="" disabled selected>Select Brand</option>
  <option value="A">Apple</option>
  <option value="B">Blackberry</option>
  <option value="G">Google</option>
  <option value="H">Huawei</option>
  <option value="L">LG</option>
  <option value="M">Motorola</option>
  <option value="S">Samsung</option>
</select>

<select name="categorylist" id="categorylist" style="width:350px;" onchange="populateValuePL(this.value);">
  <option value="" disabled selected>Select Model</option>
</select>

<select name="part" id="partlist" style="width:350px;" onchange="populateValuePL(this.value);">
  <option value="" disabled selected>Select Part</option>
</select>

<input type="text" id="pricelist" placeholder="Repair Price" style="width:350px;" readonly />

JavaScript

// Model Numbers
var brandByCategoryPL = {
    // Apple
    A: [{
        name: "iPhone"
    }, {
        name: "iPhone 3G"
    }],
    S: [{
    		name: "Galaxy S4"
    }, {
    		name: "Galaxy S5"
    }]
   }
   
   
var partByCategoryPL = {
    // Apple
    A: [{
        scrn: "Screen",
        batt: "Battery",
        chpt: "Chargeport",
        hmbt: "Home Button",
        fcam: "Front Camera",
        bcam: "Back Camera",
        bkgl: "Back Glass",
        hsng: "Housing",
        othr: "Other Small Parts"
    }],
    S: [{
        scrn: "Screen",
        batt: "$Battery",
        bkgl: "Back Glass",
        bkce: "Back Glass Ceramic",
        chpt: "$Chargeport",
        hmbt: "$Home Button",
        pcba: "Motherboard",
        fcam: "Front Camera",
        bcam: "Back Camera",
        coil: "Coil",
        ears: "Ear Speaker",
        jack: "Headphone Jack",
        loud: "Loud Speaker",
        mtor: "Vibrating Motor",
        pbtn: "Power Button",
        snsr: "Sensor",
        othr: "Other"
    }]
   }
   
var priceByCategoryPL = {
    // Apple
    A: [{
        name: "iPhone",
        scrn: "$189.00",
        batt: "$69.00",
        chpt: "$100.00",
        hmbt: "$100.00",
        fcam: "$200.00",
        bcam: "$200.00",
        bkgl: "$200.00",
        hsng: "$100.00",
        othr: "$100.00"
    }, {
        name: "iPhone 3G",
        scrn: "$189.00",
        batt: "$69.00",
        chpt: "$100.00",
        hmbt: "$100.00",
        fcam: "$200.00",
        bcam: "$200.00",
        bkgl: "$200.00",
        hsng: "$100.00",
        othr: "$100.00"
    }],
    S: [{
        name: "Galaxy S3",
        scrn: "$189.00",
        batt: "$69.00",
        bkgl: "$90.00",
        bkce: "N/A",
        chpt: "$100.00",
        hmbt: "$100.00",
        pcba: "$200.00",
        fcam: "$222.00",
        bcam: "$222.00",
        coil: "$135.00",
        ears: "$111.00",
        jack: "$111.00",
        loud: "$111.00",
        mtor: "$111.00",
        pbtn:...