JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button1" class="pockets-button" type="button">Hermes Birkin</button>
<button id="button2" class="pockets-button" type="button"> Hermes Kelly</button>
<div id="kellypockets" class="grid pockets">Bla1</div>
<div id="birkinpockets" class="grid pockets">Bla2</div>

CSS

div {
  display: none;
}

#birkinpockets {
  display: block;
}

button {
  display: inline-block;
}

.pockets-button-active {
  background: Green;
}

JavaScript

$(document).ready(function() {

  checkactive();

  $('#button1').click(function() {
    $("#kellypockets").css('display', 'block');
    $("#birkinpockets").css('display', 'none');
    checkactive();
  });
  $('#button2').click(function() {
    $("#kellypockets").css('display', 'none');
    $("#birkinpockets").css('display', 'block');
    checkactive();
  });
});



function checkactive() {
  if ($("#kellypockets").is(':visible')) {
    $('#button2').removeClass("pockets-button-active");
    $('#button1').addClass("pockets-button-active");
  }
  if ($("#birkinpockets").is(':visible')) {
    $('#button1').removeClass("pockets-button-active");
    $('#button2').addClass("pockets-button-active");
  }
}