JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panda_phone_select">
		<span class='sity'>Киев</span>
		<div class='prev_phone'>+38 (044) 502-67-67</div>
		
		<ul class="dropdun-phone">
			<li data-phone="+38 (044) 502-67-67"data-city="Киев">Киев</li>
			<li data-phone="+38 (0692) 555-278" data-city="Севастополь">Севастополь</li>
			<li data-phone="+38 (0652) 608-777" data-city="Симферополь">Симферополь</li>
			<li data-phone="+38 (0692) 555-278" data-city="Феодосия">Феодосия</li>
			<li data-phone="+38 (0654) 236-103" data-city="Ялта">Ялта</li>
		</ul>
		
	</div>

CSS

.dropdun-phone{display:none;}
span.sity,.prev_phone{cursor:pointer;}

JavaScript

$('span.sity,.prev_phone').click(function(){
					$('.dropdun-phone').slideDown();
});

$('.dropdun-phone li').click(function(){
					var phone = $(this).attr('data-phone');
                    var city = $(this).html();
					$('.prev_phone').html(phone);
                    $('.sity').html(city);
					$('.dropdun-phone').slideUp();
					$('.wp_panda_overlay1').remove();
				});