How can I "clear" the first active class appended and re-append the current active class?

Question

I don't know the correct terminology to us to describe this issue. I'm trying to append the name of the state (Alaska, Alabama, etc) from the <span class="state-name"> when it has the active class to <button class="close-state">, and it somewhat works. But, right now, the each state name is added and doesn't replace the first state. How can I "clear" the appended text and re-append the current button.active class?

$('.state-button').on('click', function() {
  let _this = $(this);

  if (!_this.hasClass('active')) {
    $('.state-button.active, .record.active').removeClass('active');
    $('[data-state=' + _this.data('state') + ']').addClass('active');
    var statename = $('button.active span.state-name').text();
    $(".close-state").append(statename);
    $(".close-state").show();
  }
});

.record {
  display: none;
}

.state-button {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
}

.state-button.active {
  border-color: red;
}

.record.active {
  display: block;
}

.close-state {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak" data-state="AK"><span class="state-name">Alaska</span></button>
<button class="state-button state-button-ar" data-state="AR"><span class="state-name">Arkansas</span></button>
<button class="state-button state-button-ca" data-state="CA"><span class="state-name">California</span></button>
<div class="record" data-state="AK">
  <h1 class="name">Customer 1</h1>
  <ul>
    <li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
  </ul>
</div>
<div class="record" data-state="AR">
  <h1 class="name">Customer 2</h1>
  <ul>
    <li class="address">Location: Mobile, <span class="state">AR</span></li>
  </ul>
</div>
<div class="record" data-state="CA">
  <h1 class="name">Customer 3</h1>
  <ul>
    <li class="address">Location: Los Angeles <span class="state">CA</span></li>
  </ul>
</div>
<div>
  <button class="close-state">Close </button>
</div>

Answer 1

The quick way to do this would be to put a new element in the button, eg. a span, and simply overwrite the text() of that each time a button is clicked.

Also note the example has a couple of tweaks to the jQuery to make it a little more succinct:

$('.state-button:not(.active)').on('click', function() {
  let $this = $(this);
  $('.state-button.active, .record.active').removeClass('active');
  $(`[data-state="${$this.data('state')}"]`).addClass('active');
  $('.close-state').show().find('span').text($this.text());
});

.record {
  display: none;
}

.state-button {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
}

.state-button.active {
  border-color: red;
}

.record.active {
  display: block;
}

.close-state {
  border: 2px solid #c2c2c2;
  padding: 5px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="state-button state-button-ak" data-state="AK"><span class="state-name">Alaska</span></button>
<button class="state-button state-button-ar" data-state="AR"><span class="state-name">Arkansas</span></button>
<button class="state-button state-button-ca" data-state="CA"><span class="state-name">California</span></button>

<div class="record" data-state="AK">
  <h1 class="name">Customer 1</h1>
  <ul>
    <li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li>
  </ul>
</div>

<div class="record" data-state="AR">
  <h1 class="name">Customer 2</h1>
  <ul>
    <li class="address">Location: Mobile, <span class="state">AR</span></li>
  </ul>
</div>

<div class="record" data-state="CA">
  <h1 class="name">Customer 3</h1>
  <ul>
    <li class="address">Location: Los Angeles <span class="state">CA</span></li>
  </ul>
</div>

<div>
  <button class="close-state">Close <span></span></button>
</div>