Keep div always as bottom when multiple gets appended – Jquery

// caching a reference to the document for use within utility functions:
const D = document,
  // two functions serving as an alias for both <document || element>.querySelector()
  // and <document || element>.querySelectorAll(), depending on the context
  // passed to the function:
  get = (selector, context = D) => context.querySelector(selector),
  getAll = (selector, context = D) => [...context.querySelectorAll(selector)],
  // caching the parents:
  parents = getAll('.parent'),
  // creating a Map() to be used to associate the "button" elements and
  // the hidden elements to be toggled:
  relationPairs = new Map();

// iterating over the parents Array using Array.prototype.forEach():
parents.forEach(
  // passing in a reference to the current '.parent' element of the
  // Array of '.parent' elements we're iterating over:
  (parent) => {
    // here we retrive all .hidden elements that immediately follow
    // a .btn_expand element, within the current .parent element:
    getAll('.btn_expand + .hidden', parent).forEach(
      // and we iterate over that Array of elements, again using
      // an Arrow function and passing the current '.hidden'
      // element into the function body;
      // here we set one key of the Map() to be the
      // previous-element sibling of the current element, and
      // the value is set to the current element:
      (el) => relationPairs.set(el.previousElementSibling, el)
    );

    // here we find the ',sort' elements within the current parent,
    // and sort them:
    getAll('.sort', parent).sort(
      // we pass in the first element (a) and the second ('b')
      // to the function, and use String.prototype.localeCompare()
      // to return a number which determines the sort alphabetical
      // sort-order, with the following assumptions:
      // a: referenceString,
      // b: comparisonString
      // the function returns:
      // negative number: if a occurs before b (a is then placed ahead of b),
      // zero (0): if a and be are equal (a and b remain in the same position),
      // positive number: a occurs after b (a is moved after b):

      (a, b) => a.textContent.localeCompare(b.textContent)
      // we then iterate over the sorted Array, using Array.prototype.forEach():
    ).forEach(
      // passing in a reference to the current Array-element to the
      // function body, and here we access the element's parentNode
      // and use Element.append() to append el to the Node (moving
      // it to be the last-child of the element):
      (el) => el.parentNode.append(el)
    );

    // here we find all elements with the .last class, within the current
    // '.parent', and iterate over that Array:
    getAll('.last', parent).forEach(
      // here we - again - add the element as the last-child of its
      // parent:
      (el) => el.parentNode.append(el)
    );

    // here we iterate over the iterable Map() converted to an
    // Array:
    [...relationPairs].forEach(
      // destructuring assignment to retrieve the 'button' ('.btn_expand')
      // and 'response' ('.hidden') elements:
      ([button, response]) => {

        // here we use EventTarget.addEventListener() to bind the anonymous
        // Arrow function as the event-handler for the 'click' event:
        button.addEventListener('click', () => {
          // in which we toggle the element.hidden property to be
          // the inverse of it's current value (it's a Boolean
          // property, so is either true/false; if true we change
          // it to false, and vice versa):
          response.hidden = !response.hidden;
        });

        // here we use Element.after() to move the
        // 'response' element to be after the
        // 'button':
        button.after(response);

        // we set the Element.hidden property of each
        // 'response' to be true (so hidden) on page-load:
        response.hidden = true;

        // and remove the 'button' key (and associated value)
        // from the relationPairs Map();
        relationPairs.delete(button);
      });
  });

.parent {
  border: 2px solid currentColor;
}

.parent:not(:first-child) {
  margin-block: 1em;
}

.btn_expand {
  background: red;
  cursor: pointer;
}

.last {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
  <div class="btn_expand sort">CCC</div>
  <div class="hidden">Hidden content shown by press CCC</div>
  <div class="btn_no_expand sort">EEE</div>
  <div class="btn_no_expand sort last">AAA</div>
  <div class="btn_no_expand sort">DDD</div>
  <div class="btn_expand sort">BBB</div>
  <div class="hidden">Hidden content shown by press BBB</div>
</div>

<div class="parent">
  <div class="btn_expand sort last">CCC</div>
  <div class="hidden">Hidden content shown by press CCC</div>
  <div class="btn_no_expand sort">EEE</div>
  <div class="btn_no_expand sort">AAA</div>
  <div class="btn_no_expand sort">DDD</div>
  <div class="btn_expand sort">BBB</div>
  <div class="hidden">Hidden content shown by press BBB</div>
</div>

const D = document,
      get = (selector, context = D) => context.querySelector(selector),
      getAll = (selector, context = D) => [...context.querySelectorAll(selector)],
      parents = getAll('.parent');

getAll('.parent > .sort').sort(
  (a, b) => a.textContent.localeCompare(b.textContent)
).forEach(
  (el) => el.parentNode.append(el)
);

.parent {
  border: 2px solid currentColor;
  display: grid;
  padding: 0.25em;
}

.parent:not(:first-child) {
  margin-block: 1em;
}

.btn_expand:not(sumamry) {
  background: red;
  cursor: pointer;
}

.last {
  background: lime;
  order: 100;
}

summary {
  background-color: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
  <details>
    <summary class="btn_expand sort">CCC</summary>
    <div class="hidden">Hidden content shown by press CCC</div>
  </details>
  <div class="btn_no_expand sort">EEE</div>
  <div class="btn_no_expand sort last">AAA</div>
  <div class="btn_no_expand sort">DDD</div>
  <details>
    <summary class="btn_expand sort">BBB</summary>
    <div class="hidden">Hidden content shown by press BBB</div>
  </details>
</div>

<div class="parent">
  <details class="last">
    <summary class="sort">CCC</summary>
    <div class="hidden">Hidden content shown by press CCC</div>
  </details>
  <div class="btn_no_expand sort">EEE</div>
  <div class="btn_no_expand sort">AAA</div>
  <div class="btn_no_expand sort">DDD</div>
  <details>
    <summary class="btn_expand sort">BBB</summary>
    <div class="hidden">Hidden content shown by press BBB</div>
  </details>
</div>