JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div> 
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>

CSS

.custom-dropdown { width:300px;}
.selected { padding:5px; cursor:pointer; min-height:37px; background-color:#ccc;}
.custom-dropdown-list { list-style:none; padding:0; margin:0; display:none;}
.custom-dropdown-list.open {  display:block;}
.custom-dropdown-list li { padding:5px; cursor:pointer;}
.custom-dropdown-list li:hover { background:#f2f2f2;}

JavaScript

$(".selected").click(function(){
		$(".custom-dropdown-list").toggleClass("open");
});

$(".custom-dropdown-list li").click(function(){
    var dataVal = $(this).attr("data-val");
    var dpText1 = $(this).children('.dp-val1').text();
    var dpText2 = $(this).children('.dp-val2').text();    
    $(".selected").attr("data-val", dataVal);
    $(".selected .dp-val1").text(dpText1);
    $(".selected .dp-val2").text(dpText2);
		$(".custom-dropdown-list").removeClass("open");  
});

$('html').on('click' , function(e){
	if($(e.target).closest('.custom-dropdown').length || $(e.target).hasClass('custom-dropdown')) return 
  
  $(".custom-dropdown-list").toggleClass("open");
});