JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<textarea id="pop"></textarea>

<div id="submit">submit</div>

<div id="displayPop"></div>

CSS

#dropdown {height:28px;overflow:hidden;border:1px solid #000;width:200px;margin:0;padding:0px;cursor:pointer;display:inline-block;}
#dropdown:hover {height:auto;overflow:auto;}
#dropdown .level1{display:block;padding:5px;}
#dropdown .level2{display:block;padding-left:10px;}
#dropdown .level3{display:block;padding-left:20px;}
#dropdown .selected{ background-color:rgba(0,0,0,0.3); }

JavaScript

$(document).ready(function(){

  var popGenerated = '';
  var dropdown = '';
  var selectedText = '';

  $( "#submit" ).click(function() {
    var incomingPops = $( '#pop' ).val().split( ',' );
    //console.log( popGenerated );
    var i;
    for (i = 0; i < incomingPops.length; i++) { 
      popGenerated += '<div class=""></div><table width="100%" border="0" cellspacing="0" cellpadding="0" class="popStruc"><tbody><tr><td class="col1" align="left" valign="top">'+incomingPops[i] + '</td><td class="col2" align="left" valign="top"><div id="dropdown"><span class="level1">Please select</span><span class="level1 selectable">Single select</span><span class="level1">Short text</span><span class="level2 selectable">Numeric</span><span class="level2 selectable">Date</span><span class="level2 selectable">Text</span><span class="level1 selectable">Long text</span></div></td><td class="col3" align="left" valign="top">&nbsp;</td></tr></tbody></table>';   
    }
    $( '#displayPop' ).html( popGenerated );
  });

//$('#dropdown').on("hover","span.selectable",function() {
  $(document).on('click','.level1.selectable, .level2.selectable, .level3.selectable',function() {
  	$( this ).siblings().removeClass( 'selected' );
    $( this ).addClass( 'selected' );
    selectedText = $( this ).text();
    $( '#dropdown span' ).first().text( selectedText );
  });

});