JSFiddle - React, Tailwind, and code Playground

HTML

<div class="five-wr">
  <span>5000 р</span>
</div>
<ul data-price="5000" class="five">
  <li>13:30</li>
  <li>16:30</li>
  <li>18:30</li>
</ul>


<div class="six-wr">
  <span>6000 р</span>
</div>
<ul data-price="6000" class="six">
  <li>13:30</li>
  <li>16:30</li>
  <li>18:30</li>
</ul>


<div class="seven-wr">
  <span>7000 р</span>
</div>
<ul data-price="7000" class="seven">
  <li>13:30</li>
  <li>16:30</li>
  <li>18:30</li>
</ul>

<div class="itogo">Итороговая цена: <span>0</span></div>

CSS

ul li {
  cursor: pointer;
}

ul li:hover,
ul li:focus {
  color: red;
}

ul li.active {color: red;}

JavaScript

$('ul li').on('click', function() {
	var dataPrice = $(this).parent('ul').attr('data-price');
  
  $('ul li').removeClass('active');
  $(this).addClass('active');
  $('.itogo').find('span').text(dataPrice);
});