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" obclick="myFunction1()">AddItems</button>
     <ul id="demo"></ul>
     
     <ul id="demo1"></ul>
     <p id="demo2"></p>

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 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 node = document.createElement("li");
    var att = document.createAttribute("id");
    att.value = "data-"+incr;
    node.setAttributeNode(att);
    
    
    var opt = document.createElement("option");
    var attSel = document.createAttribute("value");
    attSel.value = "data-"+incr;
    opt.setAttributeNode(attSel);
    var text = document.createTextNode(x);
    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);   
}