JSFiddle - React, Tailwind, and code Playground

by georgesarkisss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title> 1- to 4-level Drop Down</title>
<style type="text/css">
.DDlist { display:none; }
</style>
<label> # of Sensors
<input  id="hfDDLId" value="0" name="NOF" style="width: 20px;"/>
</label>
<br>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=202456
// and: http://www.codingforums.com/showthread.php?t=169465
// Modified for 1 to 4 (+) level drop down selections

var DigitalSelectionlist= ['D0','D1','D2',"D3","D4"]; 
var categories = [];
var Setpoint= [];
var Setpointstart= -20;
var Setpointend= 150;
var Setpointinc = 5;
var setpointlength = parseInt(Math.abs((Setpointstart-Setpointend)/Setpointinc)); 
for (var i = 0; i <= setpointlength; i++) {
    Setpoint[i] = (Setpointinc*i) + Setpointstart ;
    categories[Setpoint[i]]= ["1","2","3","4","5"];
    
}

var Analogstart= 0;
var Analogend= 16;
var Analoginc = 1;
var Analoglength = parseInt(Math.abs((Analogstart-Analogend)/Analoginc)); 
var AnalogSelectionlist= [];
var InputSelectionlist= [];
var InputSelectionlist2= [];
for (var i = 0; i <= Analoglength; i++) {
    AnalogSelectionlist[i] = "A" + ((Analoginc*i)+ Analogstart) ;
}
var numberofrowsstart= 0;
var numberofrowsend= 25;
var numberofrowsinc = 1;
var numberofrowslength = parseInt(Math.abs((numberofrowsstart-numberofrowsend)/numberofrowsinc)); 
var InputSelectionlist = [];

for (var i = 0; i <= numberofrowslength; i++) {
    InputSelectionlist[i] = "I" + ((numberofrowsinc*i)+ numberofrowsstart) ;
    InputSelectionlist2[i] = "I_" + ((numberofrowsinc*i)+ numberofrowsstart) ;
    categories[InputSelectionlist[i]]= [">=Setpoint_Input",">=Setpoint_Constant"];
    categories[InputSelectionlist2[i]]= ["1","2","3","4","5"];
}



  categories["startList"] = ["Input","Output"];        // Level 1  (True|False is 1 level only)

categories["Input"] = ["Analog","Digital"];                         // Level 2
 categories["Analog"]...

CSS

.DDlist { display:none; }
.textarea {
height: auto;
resize: none; }