JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-sm-4 col-xs-12 location">
  <div class="event-location-header">dwiudwiudw</div>

  <div class="list-group location-picker-list">
    <a href="#" class="list-group-item" data-location="2270">
      <span class="badge">4</span>
      <span class="location-name active">hthtrhtrhr</span>
    </a>
    <a href="#" class="list-group-item" data-location="2334">
      <span class="badge">1</span>
      <span class="location-name">jtjtzjjt</span>
    </a>
  </div>
</div>

CSS

.location-picker-list a.active {
  background-color: #0980cb;
}

JavaScript

$('.location').find('.location-picker-list .list-group-item').on('click', function(e) {
  e.preventDefault()
  $(this).closest('.list-group').children(".active").removeClass('active')
  $(e.target).addClass('active')
    //self.changeLocation($(this).data('location'))
})