JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>  
<span id="drdn-box-srchpid" class="irmNDrdnInputBox">
      <input type="hidden" id="drdn-key-srchpid" value="US"/>
      <input id="drdn-ip-srchpid" type="text" class="irmNDrdnInput" size="30" readOnly="readOnly" value="United States of America" style='height:30px'>
        <span id="drdn-btn-srchpid" class="irmNDrdnBtn"><img src="drdn-btn-2.png"/></span>
      </input>    
  </span>

  <div id="drdn-val-srchpid" class="irmNDrdnVal">
     <ul>
      <li key="IN">India</li>
      <li key="US">United States of America</li>
      <li key="IR">Iran</li>
      <li key="IQ">Iraq</li>
      <li key="RS">Russia</li>
      <li key="SW">Switzerland</li>
      <li key="NZ">Newzealand</li>
      <li key="UK">United Kingdom</li>
     </ul>
  </div>  
<br><div id="drdn-val-srchpid" class="irmNDrdnVal">
     <ul>
      <li key="IN">India</li>
      <li key="US">United States of America</li>
      <li key="IR">Iran</li>
      <li key="IQ">Iraq</li>
      <li key="RS">Russia</li>
      <li key="SW">Switzerland</li>
      <li key="NZ">Newzealand</li>
      <li key="UK">United Kingdom</li>
     </ul>
  </div>

CSS

/*Dynamic values
   font-size: irmNDrdnInputBox,irmNDrdnVal
   size:irmNDrdnInput    
  */

  body{
   font-family:Arial,Tahoma,sans-serif;
   font-size:0.7em;
   }
  input,button{
   font-size:100%;
  }
  input[readonly]{
   background: #e8e8e8; 
   color: #666; 
  }
  input:focus{
  border:1px dotted; 
  }
  img{
   border:none;
  }

 .irmNInput,.irmNDrdnInputBox{
      -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
  }
  
  .irmNInput,.irmNDrdnInputBox,.irmNDrdnInputBox span,.irmNDrdnVal,.irmNButton{
    box-shadow:3px 3px 3px #888;
  }
 
 /*Styles for new irm input field*/
  .irmNInput{
     border:1px solid black; 
  }
 
 /* Style for new irm dropdown list box*/
     
  .irmNDrdnInputBox{
    display:table;    
    border-spacing:0px;  
  }

  .irmNDrdnInputBox input{     
      border-left:1px solid #000;
      border-top:1px solid #000;
      border-bottom:1px solid #000;
      border-right:none;
      box-shadow:0px 3px 3px #888;
      border-radius:4px 0px 0px 4px;  
   }

  .irmNDrdnInputBox input{
      border-right:none;
      background:#fff !important;
      color:#000 !important;
      padding-left:3px;
   }

  .irmNDrdnInputBox span{
      display:table-cell;
    vertical-align:middle;
    border-left:none;
    border-right:1px solid #000;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    border-radius:0px 5px 5px 0px;
   }
  
  .irmNDrdnVal{
   display:none;
   border-bottom:1px solid black;
   border-right:1px solid black;
   border-left:1px solid black;
   position:absolute;
   float:left;
  }
 .irmNDrdnVal ul{
  list-style:none;
  margin:0px;
  padding:0px;
 }

.irmNDrdnVal ul li{
  padding:1px 1px 1px 3px;
  background:#FFF;
  cursor:default;
}
 
 /* new irm input help */
 .irmNInputHlpBox {
   display:table;
   border-spacing:0px;
   border-radius:0px 5px 5px 0px;
   box-shadow:3px 3px 3px #888;
 }
 .irmNInputHlpBox  input{
   border-left:1px solid #000;
   border-right:none;
  ...

JavaScript

var drdnBoxId,drndInputId,drdnValId,drdnKeyId,drdnValEleIdx = 0;
 //Change color of Value popup elements on mouse over
$('.irmNDrdnVal ul li').mouseover(function(){
 /*Before changing color of list element,change the background color of all list elements to white,Since some cases,some of the elements 
  background color is already changed to onMouseOver color,Let say,we change the color of list element which mateches the existed 
  select box value on value popup open.
 */
 $('.irmNDrdnVal ul li').css({"background-color":"#FFFFFF"})
 $(this).css({"background-color":"#BEBEBE"})
});

$('.irmNDrdnVal ul li').mouseout(function(){
 $(this).css({"background-color":"#FFFFFF"})
});

/*Open relevant value popup on Click on button*/
$('.irmNDrdnInputBox').click(function(event){
  /*Befor open, close all popup which are already opened*/
  //$('.irmNDrdnVal').hide();

  drdnBoxId = $(this).attr("id");
  drdnKeyId   = 'drdn-key-'+drdnBoxId.split("-")[2];
  drdnInputId = 'drdn-ip-'+drdnBoxId.split("-")[2];
  drdnValId   = 'drdn-val-'+drdnBoxId.split("-")[2];
  
  $('#'+drdnInputId).focus();//To be used to get key code on keyUp and keyDown press

  $('#'+drdnValId).slideDown(300);
  $('#'+drdnValId).outerWidth($('#'+drdnBoxId).outerWidth(true)); //Positioning value popup to select box
   var existedVal =  $('#'+drdnInputId).val();

   /*change color of value popup list item which matches to existed value*/
   $('#'+drdnValId+' ul li').each(function(i){
    if( existedVal == $(this).text()) 
    {
     drdnValEleIdx = i;//To be used at keydown and keyup event to change value list item background
     $(this).css({"background-color":"#BEBEBE"})
    }
   });

   event.stopPropagation();
});

/*Get value of value list and fill input field with it  */
       $('.irmNDrdnVal ul li').click(function(event){console.log($(this).html());
 
 var prevValue = $('#'+drdnInputId).val();
 var selectedValue = $(this).text();
 $('#'+drdnValId).slideUp(300);

 /* If data is changed,fire onChange...