jQuery Fiddle

by Henry

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Dropdowns</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .custom-dropdown {
            border: 1px solid red;
            height: 20px;
            width: 200px;
            background-color: silver;
            color: black;
        }
        .custom-dropdown option {
            background-color: white;
            height: 20px;
            width: 200px;
            border: 1px solid;
        }
        .dropdown-icon {
            cursor: pointer;
            margin-left: -25px;
        }
    </style>
</head>
<body>
    <div>
        <select id="firstDropdown" class="custom-dropdown"></select>
        <i id="firstDropdownIcon" class="fas fa-chevron-down dropdown-icon"></i>
    </div>
    <div>
        <select id="secondDropdown" class="custom-dropdown"></select>
        <i id="secondDropdownIcon" class="fas fa-chevron-down dropdown-icon"></i>
    </div>
    <div>
        <select id="thirdDropdown" class="custom-dropdown"></select>
        <i id="thirdDropdownIcon" class="fas fa-chevron-down dropdown-icon"></i>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS

.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 20px;
    margin-bottom: 10px;
}

.custom-dropdown select {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    background-color: silver;
    color: black;
    appearance: none;
    padding: 0 25px 0 5px;
    box-sizing: border-box;
}

.custom-dropdown .chevron {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.custom-dropdown.open .chevron {
    content: '\25B2'; /* Chevron up */
}

.custom-dropdown select option {
    background-color: white;
    border: 1px solid;
    height: 20px;
}

JavaScript

let data = [
  {
    "id": {
      "timestamp": "1669234340",
      "machine": "8475258",
      "pid": "-17801",
      "increment": "10773021",
      "creationTime": "2022-11-23T20:12:20Z"
    },
    "branchId": "",
    "name": "Clock and Timing",
    "subCategories": [
      {
        "branchId": "",
        "name": "Oscillators",
        "subCategories": [
          {
            "branchId": "chartno_1574",
            "name": "Crystal Oscillators (XOs)",
            "subCategories": []
          },
          {
            "branchId": "chartno_1053",
            "name": "Voltage Controlled Crystal Oscillators (VCXO)",
            "subCategories": []
          }
        ]
      },
      {
        "branchId": "",
        "name": "Clock Generation",
        "subCategories": [
          {
            "branchId": "chartno_917",
            "name": "All clock generators",
            "subCategories": []
          }
        ]
      },
      {
        "branchId": "chartno_953",
        "name": "Buffers",
        "subCategories": [
          {
            "branchId": "chartno_1040",
            "name": "SyncE and IEEE 1588",
            "subCategories": []
          },
          {
            "branchId": "chartno_1063",
            "name": "Jitter Attenuation",
            "subCategories": []
          }
        ]
      },
      {
        "branchId": "",
        "name": "Clock and Data Distribution",
        "subCategories": [
          {
            "branchId": "chartno_953",
            "name": "Buffers",
            "subCategories": []
          },
          {
            "branchId": "chartno_954",
            "name": "Drivers and Receivers",
            "subCategories": []
          }
        ]
      },
      {
        "branchId": "",
        "name": "Real - Time Clock",
        "subCategories": [
          {
            "branchId": "chartno_508",
            "name": "I2C RTCC",
            "subCategories": [
              {
                "branchId":...