JSFiddle - React, Tailwind, and code Playground

by Trevor W

HTML

<button style="position:absolute;height:20px;width:20px;" class="new">+</button>

CSS

*{
  padding:0;margin:0;
  box-sizing: border-box;
}
.dropDownTextField{
  position:relative;
  margin:10px 20px;
  float: left;
}
.dropDownTextField .main{
  padding: 0px;margin:0px;
  border-radius:2px;
  overflow:hidden;
}
.dropDownTextField .main input{
  position:relative;
  z-index:20;
  border:1px solid rgba(200,200,200,1);
  margin:0px;padding:0px 10px;
  height: 40px;line-height: 40px;
  font-size:16px;
  float: left;
}
.dropDownTextField .main .button{
  position:relative;
  z-index:20;
  height:40px;width:40px;
  background-color:rgba(200,200,200,1);
  float: left;
  cursor:pointer;
}
.dropDownTextField .main .button:hover{
  box-shadow: inset 0 0 250px 0 rgba(0,0,0,.1);
}
.dropDownTextField .main .button:active{
  box-shadow: inset 0 0 250px 0 rgba(0,0,0,.2);
}
.dropDownTextField .list{
  background-color:#FFF;
  width:100%;
  margin:5px 0 0 0;
  position: absolute;
  z-index:50;
  border-radius: 2px;
  max-height:200px;
  overflow:auto;
  box-shadow:0 1px 5px 0 rgba(0,0,0,.35);
  display:none;
}
.dropDownTextField .list.open{
  display:block;
}

.dropDownTextField .list li{
  color:rgba(50,50,50,1);
  padding:0px 10px;
  line-height:40px;
  list-style:none;
  cursor:pointer;
}
.dropDownTextField .list li:hover{
  box-shadow:inset 0 0 500px 0 rgba(0,0,0,.1);
}

JavaScript

var arrayData = [1,2,3,4,5,6,7,8,9,10];
var DDTFUniqueIDInc = 0;

function createDropDownTextField(data){
	var item = "";
  DDTFUniqueIDInc++;
  item += '<div data-ddtfid="'+DDTFUniqueIDInc+'" class="dropDownTextField">';
  
  item += '<div class="main">';
  item += 	'<input class="focusout" type="text">';
  item += 	'<div class="button"></div>';
  item += 	'<div style="clear:both;"></div>';
  item += '</div>';
  
  item += '<div class="list">';
  item += 	'<ul>';
	for (var i = 0; i < data.length; i++) {
    item += '<li>'+data[i]+'</li>';
  }
  item += 	'</ul>'
  item += '</div>';

	item += '</div>';
  
  var res = {
  	"id":DDTFUniqueIDInc,
  	"item":item
  }
	return res;
}

function enableDropDownTextFieldClicks(id){
	var item = $('.dropDownTextField[data-ddtfid="'+id+'"]');
  var button = item.find(".button");
  var input = item.find("input");
  var list = item.find(".list");
 
  button.on("click",function(event){
    event.preventDefault();

    if (list.hasClass("open")){
      closeList();
    }else{
      openList();
    }

  });
  function openList(){
  	list.addClass("open");
  }
  function closeList(){
  	list.removeClass("open");
  }
  
}






$('.new').on("click",function(){
  var res = createDropDownTextField(arrayData);
  $('body').append(res.item);
  enableDropDownTextFieldClicks(res.id);
});


/* $(document).on("click",function(){
  console.log("derp");
});



$('.dropDownTextField .button').on("click",function(event){
  event.preventDefault();
  var parent = $(this).closest(".dropDownTextField");
  var input =  parent.find("input");

  if (input.hasClass('focusout')){
    input.focus();
  }

});


$('.dropDownTextField .list li').on("click",function(){

});

$('.dropDownTextField .main input').on("focus",function(){
  var parent = $(this).closest(".dropDownTextField");
   var list =  parent.find(".list");

  $(this).removeClass('focusout').addClass('focusin');

  if(!list.hasClass("open")){
    openList(list);
  }
});

$('.dropDownTextField...