JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div class="container-route-office">
<div class="title">Маршрут до офисов компании СтройДом</div>
<p>Чтобы построить маршрут выберите офис, до которого необходимо построить маршрут<br/>
Свое местоположение обозначьте кликнув на карте маркером.
</p>
<div class="wr-choose-office">Офисы города Запорожье:
<div class="wr-select-office">
<label class="office-sel"><span>Офис в Запорожье</span> (УКРАИНА, г. Мелитополь, Ленина, дом 3)</label>
<ul>
<li><a data-office="136517" href="#"><span>Офис в Запорожье</span> (УКРАИНА, г. Мелитополь, Ленина, дом 3)</a></li>
<li><a data-office="136521" href="#"><span>Офи 1</span> (УКРАИНА, г. Мелитополь, Ленина , дом 2)</a></li>
</ul>
</div> 
</div>
<div id="map-routing">
</div>
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

CSS

#map-routing {
    height: 350px;
    margin: 15px 0 0;
    position: relative;
    width: 520px;
}
.wr-select-office{
	position:relative;
	display:inline-block;
    border: 1px solid #c1c1c1;
    color: #616161;
    font-size: 14px;
    height: 23px;
}

.wr-select-office label{
	position: relative;
	display:inline-block;
	color: #616161;
    font-size: 12px;
    height: 23px;
	line-height:23px;
	vertical-align:middle;
	width:480px;
	margin:0 5px;
	padding-right:24px;
	background:transparent url('/img/arrow-select_sm.png') right center no-repeat;
}

.wr-select-office span{
	font-weight:bold;
	font-size: 14px;
}

.wr-select-office ul{
	position:absolute;
	display:none;
	top:24px;
	left:-1px;
	margin:0;
	padding:0;
	list-style:none;
	border: 1px solid #c1c1c1;
	border-top:none;
	background:white;
	max-height:180px;
	overflow-y:auto;
	overflow-x:hidden;
	z-index:9999;
}

.wr-select-office ul li{
	display:inline-block;
	width:100%;
	font-size: 14px;
    height: 20px;
	line-height:20px;
}

.wr-select-office ul li a{
	display:inline-block;
	text-decoration:none;
	padding-left:5px;
	width:100%;
	color: #616161;
	font-size: 12px;
    height: 20px;
	line-height:20px;
	white-space: nowrap;
}

.wr-select-office ul li a:hover{
	background:#3399ff;
	color:#ffffff;
}

.wr-select-office ul li a span{
	font-weight:bold;
	font-size: 14px;
}

JavaScript

$('.office-sel').click(function(){
		$(this).next('ul').toggle();
		return false;
	});
	
	if($('.wr-select-office').length > 0){
        $(document).click(function(e){
            if($(e.target).parents('.wr-select-office').length == 0){
                $('.wr-select-office ul').hide();
            }
        });
    }
var offices_data=[{"id":"136517","supplier_id":"129677","country_id":"2","city_id":"74","name":"\u041e\u0444\u0438\u0441 \u0432 \u0417\u0430\u043f\u043e\u0440\u043e\u0436\u044c\u0435","position":"0","schelude":null,"main":"1","address":"\u0423\u041a\u0420\u0410\u0418\u041d\u0410, \u0433. \u041c\u0435\u043b\u0438\u0442\u043e\u043f\u043e\u043b\u044c, \u041b\u0435\u043d\u0438\u043d\u0430, \u0434\u043e\u043c 3","office_id":"177618","latitude":"46.841521000000","longitude":"35.392706000000","zoom":"14"},{"id":"136521","supplier_id":"129677","country_id":"2","city_id":"74","name":"\u041e\u0444\u0438 1","position":"0","schelude":null,"main":"0","address":"\u0423\u041a\u0420\u0410\u0418\u041d\u0410, \u0433. \u041c\u0435\u043b\u0438\u0442\u043e\u043f\u043e\u043b\u044c, \u041b\u0435\u043d\u0438\u043d\u0430 , \u0434\u043e\u043c 2","office_id":"177622","latitude":"46.842199000000","longitude":"35.385205000000","zoom":"14"}];

//создаем переменные
var myMap; //экземпляр карты
var markers = [];
var beginPlacemark, pointOffice,routeMap;
var referencePoints=[];
var multiRoute,masstransitButton;
var officeItemData, startData;


function init () {
	
    // Создаем кнопку, переключающую модель в режим
    // маршрутизации на общественном транспорте.
    masstransitButton = new ymaps.control.Button({
        data: { content: "На общественном транспорте"},
        options: { selectOnClick: true }
    });
	
	var  coords_center;
	if(offices_data.length>0){
		coords_center=[offices_data[0].latitude,offices_data[0].longitude];
	}
	else 
		coords_center=[55.750625, 37.626];
	
    // Создаем карту с добавленной на нее кнопкой.
    myMap = new ymaps.Map('map-routing', {
      ...