JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<input type="text" id="input">
<button id="button">add</button>
<ul id="list"></ul>

JavaScript

var input =  document.querySelector('#input');
var button = document.querySelector('#button');
var arr = [];

button.addEventListener('click',function(){
	arr.push(input.value);
    loop();
    input.value = '';
    input.focus();
    console.log(arr)
})

function loop(){
	document.querySelector('#list').innerHTML = '';
	for(var i = 0; i < arr.length; i++){
    	document.querySelector('#list').innerHTML += `
        	<li class="li" data-item=${i}>${ arr[i] }</li>
        `
    }
}

document.addEventListener('click',function(e){
	if(e.target.classList.contains('li')){
    	
    }
})