JSFiddle - React, Tailwind, and code Playground

by Trevor W

HTML

<button class="add"></button>

JavaScript

/*
Made by Trevor Wood
github.com/trevorwood1993
*/

if(typeof ddtf != 'function'){window.ddtf = function(){
	if ( typeof ddtf.init === undefined ) {
		ddtf.init = true;
		ddtf.idCnt = 0;
		ddtf.l = [];
    ddtf.debug = false
		setDocumentActions();
	}
  function log(n){
  	if(ddtf.debug){
    	console.log(n)
    }
  }
	
	function createItem(listName,inputName,inputPlaceholder,inputValue){
    log("createItem called");
		inputName == undefined ? inputName = "" : true;
		inputPlaceholder == undefined ? inputPlaceholder = "" : true;
		inputValue == undefined ? inputValue = "" : true;

		var id = ddtf.idCnt++;
		var item = "";
		item += '<div data-ddtfid="'+id+'" class="ddtf">';
		item += 	'<div class="ddtf-main">';
		item += 		'<input class="ddtf-input" name="'+inputName+'" placeholder="'+inputPlaceholder+'" type="text" value="'+inputValue+'">';
		item += 		'<div class="ddtf-bttn"><span></span></div>';
		item += 	'</div>';
		item += 	'<div class="ddtf-list hlo create" data-list="'+listName+'">';
		item += 	'</div>';
		item += '</div>';
	
		return {
			"id":id,
			"item":item
		}
	}
	
	function enableItemActions(id){
    log("enableItemActions called");
		var item = $('.ddtf[data-ddtfid='+id+']');
		var button = item.find(".ddtf-bttn");
		var input = item.find("input");
		var list = item.find(".ddtf-list");
		
		button.on("click",function(){
			if(list.hasClass("open")){
				closeList(list);
			}else{
				openList(list,input);
			}
		});	
	}

	function openList(list,input){
    log("openList called");
		var val = input.val();

		if(list.hasClass("create")){
			createList(list);
		}

		var sel = list.find("li:first-of-type");
		list.find("li").each(function(){
			var text = $(this).text();
			if(text.includes(val)){
				sel = $(this);
				return false;
			}
		});

		list.addClass("open");
		list.find("li").removeClass("sel");
		setLiHover(list);

		sel.addClass("sel");
		scrollToSelected(list,0);
	}

	function createList(list){
    log("createList called");
		var...