JSFiddle - React, Tailwind, and code Playground

by Gowtham Reddy

HTML

<h3>Items</h3>
<ul id="dynamic-list">
<li>Coffee <span onclick="delete()">x</span></li>
  <li>Tea <span onclick="delete()">x</span></li>
  <li>Milk <span onclick="delete()">x</span></li>
  
</ul>  
<input type="text" id='addValues' placeholder="Enter new items"/>
<button id="appendToList" onclick="myFunction()">ADD</button>

CSS

span {
  color: red;
  
}

JavaScript

function myFunction(){
var ul = document.getElementById("dynamic-list");
var addlist = document.getElementById('addValues');
var span =create0
var li = document.createElement("li");
  li.setAttribute('id',addlist.value);
  li.appendChild(document.createTextNode(addlist.value));
  ul.appendChild(li);
	//document.getElementById('list').innerHTML = addlist;
}