JSFiddle - React, Tailwind, and code Playground

HTML

<div class="space2"> <div class="divider"> <div class="c-hr"><hr class="ie-fix"></div></div> 

<div id="rooms">   
<ul id="check-rooms">

  <li class="room_c"><div class="room_list" data-room="1"><img src="http://classikhotel.com/site-assets/photos/rooms1.jpg"><div class="room-description"><span class="label_bold">Эконом</span><br><span class="desc"> Две кровати</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="1" title="Номер класса Эконом">More Info</div></span></div></div></li> 
  <li class="room_c"><div class="room_list" data-room="2"><img src="http://classikhotel.com/site-assets/photos/rooms2.jpg"><div class="room-description"><span class="label_bold">Стандарт</span><br><span class="desc">Двойная кровать</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="2" title="Номер класса Стандарт">More Info</div></span></div></div></li>  
   <li class="room_c extra"><div class="room_list" data-room="3"><img src="http://classikhotel.com/site-assets/photos/rooms2.jpg"><div class="room-description"><span class="label_bold">Стандарт</span><br><span class="desc">Две кровати</span></div><div class="room_box"><a href="/photos"><span class="camera_left"><img src="site-assets/camera_icon.png" style="height: 16px; width: auto; position: relative;"></span></a><span class="camera_right"><div class="room_mdts" data-room="3" title="Номер класса Стандарт">More Info</div></span></div></div></li>  
   <li class="room_c extra"><div class="room_list" data-room="4"><img src="http://classikhotel.com/room-category/attic/img1.jpg"><div class="room-description"><span class="label_bold">Эконом...

CSS

html {
	background: rgb(52,61,66); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(52,61,66,1) 0%, rgba(195,207,216,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,61,66,1)), color-stop(100%,rgba(195,207,216,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(52,61,66,1) 0%,rgba(195,207,216,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(52,61,66,1) 0%,rgba(195,207,216,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(52,61,66,1) 0%,rgba(195,207,216,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(52,61,66,1) 0%,rgba(195,207,216,1) 100%); /* W3C */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343d42', endColorstr='#c3cfd8',GradientType=0 ); /* IE6-9 */
	background-attachment: fixed;
	z-index: -1;
	max-height: 100%;
}


html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	/*cursor:url(../site-assets/arrow_f2.cur), default; */
}

ul {
    list-style-type: none;
}

body {
	overflow-x: hidden;
	font-family: Arial, Helvetics, sans-serif;	
}


.buttonset {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}



.buttonset:before {
	background-color: #F8AC07; 
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function:...

JavaScript

$(document).ready(function(){
    $('.button.close').click(function(){
        $(".room_c.extra").hide(0);
        $('.button.close').hide(0); 
        $('.button.open').show(0);  
    });
     $('.button.open').click(function(){
        $(".room_c.extra").show(0);
        $('.button.close').show(0); 
        $('.button.open').hide(0); 
 
    });
     $('.room_details_close').click(function(){
        $("#room_details_holder").hide(0);
         
    });
   
$(".room_mdts").click(function(event){
    //get the target 
    var target = event.currentTarget;
    var room = $(target).data("room");
    
    
    //First way, by reuse target (only inside this function)
    $('#room_details_holder').show();
    //The second, by using selectors
    
    //remove all "selected" classes to all which have both "room" and "selected" classes
    $('.room_exp.selected').removeClass("selected");
    //add "selected" class to the current room (the selector can also be the target variable)
    $('.room_exp[data-room='+room+']').addClass("selected");
});


 


var currentIndex = 0,
  items = $('.room_details .room_exp'),
  itemAmt = items.length;
  
function cycleItems() {
  var item = $('.room_details .room_exp').eq(currentIndex);
  items.hide();
  item.css('display','inline-block');
}


$('.room_next').click(function() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
});

$('.room_previous').click(function() {
  currentIndex -= 1;
  if (currentIndex < 0) {
    currentIndex = itemAmt - 1;
  }
  cycleItems();
  $('#room_name').text($('.room_exp:nth-child('+(currentIndex+1)+')').attr('title'));
});

$('.room_next').click(function(){
    $('#room_name').text($('.room_exp:nth-child('+(currentIndex+1)+')').attr('title'));
});
$('.room_previous').click(function(){
    $('#room_name').text($('.room_exp:nth-child('+(currentIndex-1)+')').attr('title'));
});
$('#room_name').text($('[style*="inline-block"].room_exp').attr('title'));


});