jQuery .append doesn't work with $(document).ready

Question

This is a followup to toggleClass of parent div not changing with onClick

In my HTML layout, I've found that I need to generate the div #filters after the records, not before, because I need to use PHP to build the buttons for each state. This gave me the idea to use jQuery .append to move the #filters to the #move-filters-here above the records. But after I filter on a state, the filters appear below the records and .append doesn't work to move the #filters to #move-filters-here above the records.

Is .append not working with (document).ready?

Is there a different way to get .append to move the #filters?

Does .append need to "fire" again after the Onclick function?

Fiddle: https://jsfiddle.net/j3semt6h/10/

$(document).ready(function(){

$("#filters").append("#move-filters-here");

$('.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');

  }

});

});

  .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;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="move-filters-here"></div>

<div class="record" data-state="AK">
    <h1 class="name">Customer 1</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <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="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <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="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Los Angeles <span class="state">CA</span></li>
    </ul>
</div>

<div class="record" data-state="AZ">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Flagstaff <span class="state">AZ</span></li>
    </ul>
</div>

<div class="record" data-state="UT">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: SLC <span class="state">UT</span></li>
    </ul>
</div>


<div id="filters">
<button class="state-button state-button-ak" data-state="AK">Alaska</button>
<button class="state-button state-button-ar" data-state="AR">Arkansas</button>
<button class="state-button state-button-ca" data-state="CA">California</button>
<button class="state-button state-button-ca" data-state="AZ">Arizona</button>
<button class="state-button state-button-ut" data-state="UT">Utah</button>
</div>

Answer 1

I'm assuming you are confusing append with appendTo. Right now you are appending the literal text "#move-filters-here" to the #filters element's contents. It would work if you'd use $('#filters').appendTo('#move-filters-here') instead.

$(document).ready(function(){

$("#filters").appendTo("#move-filters-here");

$('.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');

  }

});

});

  .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;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="move-filters-here"></div>

<div class="record" data-state="AK">
    <h1 class="name">Customer 1</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <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="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <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="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Los Angeles <span class="state">CA</span></li>
    </ul>
</div>

<div class="record" data-state="AZ">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: Flagstaff <span class="state">AZ</span></li>
    </ul>
</div>

<div class="record" data-state="UT">
    <h1 class="name">Customer 3</h1>
    <ul>
        <li class="focus">Focus: </li>
        <li class="course">Course: </li>
        <li class="business">Business: </li>
        <li class="address">Location: SLC <span class="state">UT</span></li>
    </ul>
</div>


<div id="filters">
<button class="state-button state-button-ak" data-state="AK">Alaska</button>
<button class="state-button state-button-ar" data-state="AR">Arkansas</button>
<button class="state-button state-button-ca" data-state="CA">California</button>
<button class="state-button state-button-ca" data-state="AZ">Arizona</button>
<button class="state-button state-button-ut" data-state="UT">Utah</button>
</div>

_{(Or, if you'd want to use append in particular for some reason, you'd need to do it the other way round and also actually reference the to-be-appended thing as element: $('#move-filters-here').append($('#filters')).)}