Как применить функцию jquery к определенному элементу?

$(".white-btn").on("click", function() { 
  $(".white-btn").removeClass('white-btn-active'); 
  $(this).addClass('white-btn-active'); 
});

.white-btn { 
  white-space: nowrap; 
  display: inline-block; 
  text-transform: uppercase; 
  color: var(--text); 
  font-weight: 500; 
  font-size: 14px; 
  padding: 6px 14px; 
  border-radius: 30px; 
  background-color: #f5f5f5; 
  cursor: pointer; 
} 
 
.white-btn-active { 
  color: #3f51b5; 
  background-color: transparent; 
  border: 1px solid #3f51b5; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class=" sort-items"> 
  <span>Sort blog: </span> 
  <div class="white-btn white-btn-active">all</div> 
  <div class="white-btn">phorography</div> 
  <div class="white-btn">lifestyle</div> 
  <div class="white-btn">trip</div> 
  <div class="white-btn">inspiration</div> 
</div>