JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<span class="cityname">Ваш город:</span>
	<div class="city">
		<div class="skinned-wrapper">
		<div class="skinned-text"></div>
			<select class="skinned-select">
				<option value="0">Санкт-Петербург</option>
				<option value="1">Москва</option>
				<option value="2">Калининград</option>
		</select>
		</div>
	</div>
</div>
	<div class="phone">
		<span class="span-ind">(495)</span> 
		<span class="span-num">727-72-31</span>
	</div>

	<div class="phone">
		<span class="span-ind">(444)</span> 
		<span class="span-num">727-72-31</span>
	</div>

	<div class="phone">
		<span class="span-ind">(777)</span> 
		<span class="span-num">727-72-31</span>
	</div>

CSS

.phone{
     display: none;
   }
   .skinned-text{
     position:  absolute;
      background: #FF0000;
      color: #FFFFFF;
       padding: 2px;
       width: 150px;

   }
   .skinned-select {
     width: 178px;
      background: #FF0000;
       color: #FFFFFF;
     padding: 2px;
      height: 28px;
   }

JavaScript

$(function(){
			 	$('.skinned-select').change(function(){
				v=$('.skinned-select').val();
				h=$('option:selected').text();
                $('.skinned-text').text(h)
				 $('.phone').hide();
				$('.phone:eq('+v+')').show();
			});
		});
      $('.skinned-select').change()