Ajouter une classe active au bouton d'onglet sur l'option de menu sélectionnée

J'ai le composant d'onglets suivant :

<a data-tab="tab-1" class="button active">Tab 1</a>
<a data-tab="tab-2" class="button">Tab 2</a>
<a data-tab="tab-3" class="button">Tab 3</a>

<div class="tab-content active" id="tab-1">Tab 1 content</div>
<div class="tab-content" id="tab-2">Tab 2 content</div>
<div class="tab-content" id="tab-3">Tab 3 content</div>

Et en dessous, j'ai un menu de sélection :

<select>
  <option>Please select</option>
  <option value="tab-1">Tab 1</option>
  <option value="tab-2">Tab 2</option>
  <option value="tab-3">Tab 3</option>
</select>

Lorsque vous cliquez sur les onglets, l'option de menu de sélection respective change. Ce que j'essaie de réaliser maintenant, c'est d'ajouter la classe active aux boutons d'onglet lorsque son option de menu de sélection respective est choisie et de supprimer évidemment cette classe du bouton d'onglet précédent.

C'est le JS :

$('.button').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('.button').removeClass('active');
        $('.tab-content').removeClass('active');

        $(this).addClass('active');
    $("#" + tab_id).addClass('active');

    $('select').val($(this).data('tab')).change();
  })

  $("select").change(function () {
    $('.tab-content').removeClass('active');
    $('#' + $(this).val()).addClass('active');
  });

J'ai essayé d'ajouter $('.button').addClass('active');comme ceci :

$("select").change(function () {
  $('.tab-content').removeClass('active');
  $('#' + $(this).val()).addClass('active');
  $('.button').addClass('active');
});

Cependant, cela ajoute la classe active à chaque bouton d'onglet choisi dans le menu de sélection.

Veuillez voir la démo ici

Merci de votre aide.