How do I sort “hall” boxes within a wrapper div (alphabetically, re-alphabetically, by capacity) depending on the option value?

Solution for How do I sort “hall” boxes within a wrapper div (alphabetically, re-alphabetically, by capacity) depending on the option value?
is Given Below:

I’m trying to be able to sort halls based on the option value, which can sort by default (currently works, just re-fetches data), alphabetically, reverse alphabetically and by capacity. I’ve got some jQuery for the alphabetical sort that I’ve tried to make work, though it doesn’t seem to do so.

jQuery/JavaScript Sorting Function:

function sortHalls() {
        let sortOption = document.getElementById("sortFilterText").value;
            if (sortOption == "default") {
                document.getElementById("hallWrapper").innerHTML = "";
                fetchData();
            } else if (sortOption == "alphabetically") {

                let alphabeticallyOrdered = $('.hall').sort(function(a, b) {
                    let $aTitle = $(a).find('.hallName'), $bTitle = $(b).find('.title');
                    return String.prototype.localeCompare.call($aTitle.text().toLowerCase(), $bTitle.text().toLowerCase());
                });

                let wrapper = $("#hallWrapper");
                wrapper.detach().empty().append(alphabeticallyOrdered);
                $('body').append(wrapper);
                
            } else if (sortOption == "realphabetically") {

            } else if (sortOption == "capacity") {

            }
}

Hall Div Structure:

`<div class="hall">
      <div class="info">
          <p>${data.Halls[halls[i]].Location[0].Address}, ${data.Halls[halls[i]].Location[1].Suburb}<br>Capacity: ${data.Halls[halls[i]].Room[0]["Standing Capacity"]}</p> 
      </div>
      <div class="image">
          <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]]["Hall Name"]}">
      </div>
      <div class="hallNameBox">
          <p class="hallName">${data.Halls[halls[i]]["Hall Name"]}</p>
      </div>
</div>`;

HTML Select:

<div id="sortFilter" class="flexColumn">
     <label for="sortFilterText">Sort Community Halls</label>
     <select id="sortFilterText" onchange="sortHalls()">
         <option value="default">Default (Newest)</option>
         <option value="alphabetically">Alphabetically</option>
         <option value="realphabetically">Reverse Alphabetically</option>
         <option value="capacity">Capacity (Highest)</option>
     </select>
</div>

You can compare your .hallName element with each other and then append those sorted value inside your wrapper element .Also , you can do this for capacity as well .

Demo Code :

function sortHalls(sortOption) {
  if (sortOption == "default") {
    //document.getElementById("hallWrapper").innerHTML = "";
    // fetchData();
  } else if (sortOption == "alphabetically") {
    $(".hall").sort(ascending_sort).appendTo("#hallWrapper");

  } else if (sortOption == "realphabetically") {
    $(".hall").sort(descending_sort).appendTo("#hallWrapper");

  } else if (sortOption == "capacity") {
    $(".hall").sort(capacity_sort).appendTo("#hallWrapper");
  }
}
//sortiing in ascending
function ascending_sort(a, b) {
  return ($(b).find(".hallName").text().toUpperCase()) <
    ($(a).find(".hallName").text().toUpperCase()) ? 1 : -1;
}
//sorting in descending
function descending_sort(a, b) {
  return ($(b).find(".hallName").text().toUpperCase()) >
    ($(a).find(".hallName").text().toUpperCase()) ? 1 : -1;
}
//sorting from high to low capacity
function capacity_sort(a, b) {
  return parseInt($(b).find(".capacity").text()) - parseInt($(a).find(".capacity").text());
}
.hall {
  border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="sortFilter" class="flexColumn">
  <label for="sortFilterText">Sort Community Halls</label>
  <select id="sortFilterText" onchange="sortHalls(this.value)">
    <option value="default">Default (Newest)</option>
    <option value="alphabetically">Alphabetically</option>
    <option value="realphabetically">Reverse Alphabetically</option>
    <option value="capacity">Capacity (Highest)</option>
  </select>
</div>
<div id="hallWrapper">
  <div class="hall">
    <div class="info">
      <p>Something <br>Capacity: <span class="capacity">4</span></p>
    </div>
    <div class="image">
      <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]][" Hall Name "]}">
    </div>
    <div class="hallNameBox">
      <p class="hallName">Hello</p>
    </div>
  </div>
  <div class="hall">
    <div class="info">
      <!--added span tag around capacity value -->
      <p>Something9<br>Capacity: <span class="capacity">2</span></p>
    </div>
    <div class="image">
      <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]][" Hall Name "]}">
    </div>
    <div class="hallNameBox">
      <p class="hallName">Abxy</p>
    </div>
  </div>
  <div class="hall">
    <div class="info">
      <p>Something2<br>Capacity: <span class="capacity">1</span></p>
    </div>
    <div class="image">
      <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]][" Hall Name "]}">
    </div>
    <div class="hallNameBox">
      <p class="hallName">Abmn</p>
    </div>
  </div>
</div>