JSFiddle - React, Tailwind, and code Playground

HTML

<div class="prices">
	<div class="open">Цена<span class="expand"></span></div>
	<ul class="listp">
		<li class="price_1000"><input type="checkbox" /><label for="prices_less_1000">до 1000 руб.</label></li>
		<li class="price_2000"><input type="checkbox" /><label for="prices_from_1000_to_2000">от 1000 до 2000 руб.</label></li> 
		<li class="price_3000"><input type="checkbox" /><label for="prices_from_2000_to_3000">от 2000 до 3000 руб.</label></li>
		<li class="vip"><input type="checkbox" /><label for="prices_from_3000">VIP</label></li>
	</ul>
</div>

<div class="prices">
	<div class="open">Метро<span class="expand"></span></div>
	<ul class="listm">
	<li onclick="set_region_id('subway_id',0);update_search_cards();" value='0'>Метро</li>						
	<li onclick="set_region_id('subway_id',".$userdatas['id_metro'].");update_search_cards();" value='".$userdatas['id_metro']."'>Мметро1</li>
 
	</ul>
</div>
<input name="region_id" type="hidden" value="0">
<input name="subway_id" type="hidden" value="0">

CSS

.prices { width: 140px;  margin: 0px 10px; background: #fff; border: 1px solid #C8B5A1; cursor: default; z-index: 9999;position: relative; font-size: 13px;}
.prices label{vertical-align: text-top}
.prices ul li:hover{background-color: #3696E9; color: #FFFFFF;}
.prices ul {display:none; position:absolute; list-style: none;padding: 4px 0px;width:170px; margin:0px -1px -1px; border: 1px solid #C8B5A1; overflow:hidden; background:none 0% 0% repeat scroll rgb(255, 255, 255);}
.expand {background: url(http://s018.radikal.ru/i522/1508/81/84e20b4a3468.png) no-repeat left; height: 10px; width: 10px; margin: 3px 0; float: right; cursor:default}

JavaScript

function update_search_cards ()
	{
		
		var arr2 = [];
		arr2['prices_less_1000'] = 'до 1000 руб.';
		arr2['prices_from_1000_to_2000'] = 'от 1000 до 2000 руб';
		arr2['prices_from_2000_to_3000'] = 'от 2000 до 3000 руб';
		arr2['prices_from_3000'] = 'VIP';
		
		var data = new Object ();
		var vid_sauna = '';
		var price_sauna = '';
		$("#filter_submit_form").find("input").each (function() {

			var value = $(this).val();
			var name = $(this).attr('name');
			
			if ($(this).attr('type') == 'checkbox') {
				value = $(this).attr('checked')*1;
			}
			
			if (value) {
				data[name] = value;
				if (arr[name]) 
				{
					if (vid_sauna) vid_sauna += ', ' + arr[name];
					else vid_sauna += ' ' + arr[name];
				}
				
				if (arr2[name]) 
				{
					if (price_sauna) price_sauna += ', ' + arr2[name];
					else price_sauna += ' ' + arr2[name];
				}
			}
		});
		data['region_id'] = $("[name=region_id]").val();
		data['subway_id'] = $("[name=subway_id]").val();
		data['gorod_id'] = $("[name=gorod_id]").val();
		
		var region_name = '';
		var subway_name = '';
		var gorod_name ='';
		var new_title = '<b class = "contentTitle">Сауны и бани Москвы: найдено </b><span class="found"><?echo count($GLOBALS["___"]["cards"])?></span>';
		if (data['region_id']>0)
		{
			region_name = '<b class = "contentTitle">' + $('[name=region_id] option:selected').text() + '</b>';
		}
		if (data['subway_id']>0)
		{
			subway_name = '<b class = "contentTitle">' + $('[name=subway_id] option:selected').text() + '</b>';
		}
		if (data['gorod_id']>0)
		{
			gorod_name = '<b>Город:</b> ' + $('[name=gorod_id] option:selected').text() + '<br>';
		}
		if (vid_sauna)
		{
			vid_sauna = '<b>Сауны и бани на </b> ' + vid_sauna + '<br>';
		}
		
		if (price_sauna)
		{
			price_sauna = '<b>Цена:</b> ' + price_sauna + '<br>';
		}

		if (region_name || subway_name)
		{
			new_title = region_name + subway_name + '<b class = "contentTitle"> - найдено </b><span class="found" id =...