JSFiddle - React, Tailwind, and code Playground

by atifkarim

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <title>JSON Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body id="body" style="margin-top: 0">
  <div class="container" style="margin-top:100px;">
    <form action="/action_page.php">
      <label for="combination">make combination:</label>
      <select name="device_n" id="device_n"></select>
      <select name="name_n" id="name_n"></select>
      <select name="value_n" id="value_n"></select>
      <br><br>
      <input type="submit" value="Submit">
    </form>
  </div> 
  
</body>
</html>

JavaScript

data = {
  "0001_Summer": {
    "param": [
      "row_heat_0",
      "row_heat_1",
      "row_heat_2",
      "row_heat_3",
      "row_heat_4",
      "row_heat_5",
      "row_heat_6",
      "All"
    ],
    "value": [
      "value_00",
      "value_01",
      "value_02",
      "value_03",
      "value_04",
      "value_05",
      "value_06",
      "All"
    ]
  },
  "0002_Winter": {
    "param": [
      "row_cloud_0",
      "row_cloud_1",
      "row_cloud_2",
      "row_cloud_3",
      "row_cloud_4",
      "row_cloud_5",
      "row_cloud_6",
      "row_cloud_7",
      "row_cloud_8",
      "All"
    ],
    "value": [
      "value_00",
      "value_01",
      "value_02",
      "value_03",
      "value_04",
      "value_05",
      "value_06",
      "value_07",
      "value_08",
      "All"
    ]
  },
  "0003_Spring": {
    "param": [
      "row_color_0",
      "row_color_1",
      "row_color_2",
      "row_color_3",
      "row_color_4",
      "All"
    ],
    "value": [
      "value_00",
      "value_01",
      "value_02",
      "value_03",
      "value_04",
      "All"
    ]
  },
  "0004_Autumn": {
    "param": [
      "dev_x_0",
      "dev_x_1",
      "dev_x_2",
      "dev_x_3",
      "All"
    ],
    "value": [
      "value_00",
      "value_01",
      "value_02",
      "value_03",
      "All"
    ]
  }
}


function make_option_1(data, select, value, value_1 = null) {
    option = $("<option>")
        .attr({
            text: data,
            value: value,
            value_1: value_1
        }).html(data);
    select.append(option);
}

function make_dropdown_1(data) {
    var select_device = document.getElementById("device_n");
    var select_name = document.getElementById("name_n");
    var select_value = document.getElementById("value_n");

    var jqr_select_device = $(select_device);
    var jqr_select_name = $(select_name);
    var jqr_select_value = $(select_value);

    for (let a in data) {
        make_option_1(a, jqr_select_device, a);
        for...