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>
     <ul id="demo"></ul>
     
     <ul id="demo1"></ul>
     
     <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;
    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);   
}

(function(){
    var ul = document.createElement('ul');
    ul.setAttribute('id','proList');

    var t, tt;
    productList = ['Electronics Watch','House wear Items','Kids wear','Women Fashion'];
    
    document.getElementById('renderList').appendChild(ul);
   ...