JSFiddle - React, Tailwind, and code Playground

by cubicalmonkey

HTML

<div id="subfilterNamesContainer">
    <label>
        <input sortname="balls1" type="checkbox" value="X"> X
    </label>
    <label>
        <input sortname="balls2" type="checkbox" value="A"> A
    </label>
    <label>
        <input sortname="balls3" type="checkbox" value="A A"> A A
    </label>
    <label>
        <input type="checkbox" value="A B" class="default"> A B
    </label>
    <label>
        <input type="checkbox" value="F" > F
    </label>
    <label>
        <input type="checkbox" value="E" > E
    </label>
</div>

CSS

label {
    display: block;
}

JavaScript

function sortGiveNamesFilter() {

  var sorted = $("#csubfilterNamesContainer label").sort(sortByText);
  $("#subfilterNamesContainer").html(sorted);
}


function sortByText(a, b) {
  //return $.trim($(a).text()) > $.trim($(b).text());

  console.log("A " + a.lastElementChild.attributes[0].nodeValue);
  console.log(b.lastElementChild.attributes[0].nodeValue);
  console.log("B " + $.trim(a.lastElementChild.attributes[0].nodeValue));
  return $.trim(a.lastElementChild.attributes[0].nodeValue) > $.trim(b.lastElementChild.attributes[0].nodeValue);
}

sortGiveNamesFilter();