Swap active buttons

Question

I am using jQuery with Bootstrap v4 and have a show and hide view where you can swap views. I need to swap the button classes though with btn-primary and btn-secondary for the active and non active states.

 <div class="row py-2">
      <div class="col-xs-12 col-lg-5">
        <div class="row">
          <div class="col-xs-12 col-lg-6 server-btns">
            <button class="btn btn btn-block btn-primary drop" data-target="product-view"><i class="fa fa-th-large" aria-hidden="true"></i>
 Product View</button>
          </div>
          <div class="col-xs-12 col-lg-6 server-btns">
            <button class="btn btn btn-block btn-secondary" data-target="list-view"><i class="fa fa-list" aria-hidden="true"></i>
 List View</button>
          </div>
        </div>  
      </div>
    </div>

jQuery

$('#list-view').hide();
    $('.server-btns button').click(function(ev){
        ev.preventDefault();
        var btnData = '#'+$(this).data('target');
        $('.servers').not(btnData).hide();
        $(btnData).show();
    });

I need to clear the first button (as its active with btn-primary and replace it with btn-secondary - updated code

 $('#list-view').hide();
    $('.server-btns button').click(function(ev){
            ev.preventDefault();
            $('.server-btns button').removeClass('btn-primary');
            $(this).removeClass('btn-secondary').addClass('btn-primary');
            //get data from button
            var btnData = '#'+$(this).data('target');
            // //Send id to container div

            $('.servers').not(btnData).hide();
            $(btnData).show();
        });