JSFiddle - React, Tailwind, and code Playground

by gauravsingh

HTML

<input type="text" id="myInput" value="">
<button id="addData">Add</button>
 
 <input type="text" id="myInput1">
     <select id="mySelect"></select>    
<button id="addSubmenu" onclick="myFunction1('demo', 'myInput1');">AddItems</button>
     <div id="list_id"><ul id="demo"></ul></div>
     
     <ul id="demo1"></ul>
     <p id="tags"></p>
     <div id="renderList"></div>

CSS

ul{
    padding: 0;
    margin:10px 0 0;
    width: 100%;
    float: left;
}
ul li{
    list-style: none;
    float: left;
    padding: 10px;
    border: 1px solid silver;
}

JavaScript

//var incr = 0;
var adOption = new Object();
var myButton = document.getElementById("addData");
myButton.addEventListener("click", myFunction);

//var myButton1 = document.getElementById("addSubmenu");
//myButton1.addEventListener("click", myFunction1);

function myFunction() {
    //incr++;
	var x = document.getElementById("myInput").value;
    var ul = document.getElementById("demo");
    var node = document.createElement("li");
    var children = ul.children.length + 1;
    console.log(children);
    node.setAttribute("id", "element"+children);
    //var att = document.createAttribute("id");
    //att.value = "data-"+incr;
    //node.setAttributeNode(att);
    node.appendChild(document.createTextNode(x));
    ul.appendChild(node);
    
    
    var select = document.getElementById("mySelect");
    var opt = document.createElement("option");
    var childrensel = select.children.length + 1;
    opt.setAttribute("value", "element"+childrensel);
    //var attSel = document.createAttribute("value");
    //attSel.value = "data-"+incr;
    //opt.setAttributeNode(attSel);
    //var text = document.createTextNode(x);
    opt.appendChild(document.createTextNode(x));
    select.appendChild(opt);
    
    //var seltext = document.createTextNode(x);
    //node.appendChild(text);
    //opt.appendChild(seltext);
    //document.getElementById("demo").appendChild(node);   
    //document.getElementById("mySelect").appendChild(opt);  
}


function myFunction1() {
    var x1 = document.getElementById("myInput1").value;
    var node1 = document.createElement("li");
    var text1 = document.createTextNode(x1);
    node1.appendChild(text1);
    document.getElementById("demo1").appendChild(node1);  
    
    var a = document.getElementById("mySelect").selectedIndex;
    var b = document.getElementById("mySelect").options;
    alert("Index: " + b[a].index + " is " + b[a].value);
    
    if((b[a].value)!= ""){
    	console.log("inside");
   	}
   
    var txt="";
    var form =...