JSFiddle - React, Tailwind, and code Playground

by Rupali Soni

HTML

Profile selection :
<div id="profile_selection"></div>
<br/>Company Selection:
<div id="company_selection"></div>
<br>
<b>DM</b>

<div id="DM"></div>
<br>
<b>DA</b>

<div id="DA"></div>
<br>
<b>MR</b>

<div id="MR"></div>

JavaScript

var PRIVILEGE_PROFILES = [{
    PROFILE_ID: "Train Manager",
    COMPANY_CODE: "GW",
    PRIVILEGE_CODE: ["DASuper", "DAAccess", "MRSuper", "MRAccess", "VwTyrell"],
}, {
    PROFILE_ID: "Train Director",
    COMPANY_CODE: "TP",
    PRIVILEGE_CODE: ["MRAccess", "MRSuper", "DAAccess"],
}, {
    PROFILE_ID: "Driver",
    COMPANY_CODE: "XC",
    PRIVILEGE_CODE: ["DASuper", "DAAccess", "VwTyrell"],
}, {
    PROFILE_ID: "Crew",
    COMPANY_CODE: "XC",
    PRIVILEGE_CODE: ["VwTyrell"],
}];



var SEC_Privileges = [{
    Unique_Code: "DAAccess",
    Name: "Dispatch App Access",
    Group_Code: "DA"
}, {
    Unique_Code: "DASuper",
    Name: "Dispatch App Supervisor",
    Group_Code: "DA"
}, {
    Unique_Code: "MRSuper",
    Name: "MyRoster Supervisor",
    Group_Code: "MR"
}, {
    Unique_Code: "MRAccess",
    Name: "MyRoster Access",
    Group_Code: "MR"
}, {

    Unique_Code: "VwTyrell",
    Name: "View Tyrell",
    Group_Code: "DM"
}, {

    Unique_Code: "VwStats",
    Name: "View Usage Stats",
    Group_Code: "DM"
}

];


var COMPANY_PRIVILEGES = [{
    COMPANY_CODE: "GW",
    UNIQUE_CODE: ["VwTyrell", "VwStats", "DASuper", "DAAccess", "MRSuper", "MRAccess"],
}, {
    COMPANY_CODE: "TP",
    UNIQUE_CODE: ["VwTyrell", "VwStats", "MRSuper", "MRAccess"],
}, {
    COMPANY_CODE: "XC",
    UNIQUE_CODE: ["VwTyrell", "VwStats", "DASuper", "DAAccess"],

}];


formatAppSelect();

function formatAppSelect() {


    var companyselectHTML = "<select name='select_company' id='select_company' class='form_drop_down' data-role='none'>" +
        "<option>None</option>";

    var profileselectHTML = "<select name='select_profile' id='select_profile' class='form_drop_down' data-role='none'>" +
        "<option>None</option>";


    for (var p = 0; p < COMPANY_PRIVILEGES.length; p++) {
        companyselectHTML += "<option value='" + COMPANY_PRIVILEGES[p].COMPANY_CODE + "'>" + COMPANY_PRIVILEGES[p].COMPANY_CODE + "</option>";
    }

    profileselectHTML += "</select>";
   ...