Sort UL when selection changed

Question

I want to sort the elements in a ul-tag, on the current selection in a select-tag. This means if the current option in the select is wega for example, only users with value.wega = 1 should be displayed in the list. The value also can be "blank" which means all users should be displayed. In the beginning, there is a foreach loop that adds data to a ul list and displays it. Currently there is a change listener onto the sort-box, that checks if the selection got changed and trys to change the list.

$(function() {
  window.onload = (e) => {
    window.addEventListener('message', (event) => {
      var item = event.data;
      if (item.list != null) {
        let text = "";
        item.list.forEach(add);
        //text += "</ul>";
        document.getElementById("user-list").innerHTML = text;
        //document.getElementById("sort-box").id = item
        if (item.display == true) {
          $("#container").show();
        } else {
          $("#container").hide();
        }

        function add(value) {
          text += "<li id = TEST_" + value.identifier + ">" + value.identifier + " - " + value.firstname + " " + value.lastname + "(" + value.name + ") - Rang " + value.job_grade + "<br>" + " <input class=WEGA id =" + value.identifier + "_" + value.name + " type=checkbox " + getChecked(value.wega) + ">WEGA</input>" + " <input class=COBRA id=" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.cobra) + ">Cobra</input>" + " <input class=LKA id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.lka) + ">BK/LKA</input>" + " <input class=LVA id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.lva) + ">LVA</input>" + " <input class=ET id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.et) + ">ET</input>" + " <input class=STG id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.stg) + ">STG</input>" + " <input class=HELI id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.heli) + ">Libelle</input>" + " <input class=MOT id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.mot) + ">MOT</input>" + " <input class=SEIL id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.seil) + ">Seil</input>" + " <input class=TASER id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.taser) + ">Taser</input>" + " <input class=GSOD id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.gsod) + ">GSOD</input>";
          //" <br> &ensp; -> wega: " + getBool(value.wega) + ", cobra: " + getBool(value.cobra) + ", lka: " + getBool(value.lka) + "</li>";
        }
        //console.log(educationName)
        $('body').keyup(function(e) {
          switch (e.keyCode) {
            case 27:
              $("#container").hide();
              $.post("https://ax_policeEducation/exit", JSON.stringify({}));
          }
        });
        const elements = document.querySelectorAll('ul#user-list li input')
        elements.forEach(el => el.addEventListener('click', event => {
          $.post("https://ax_policeEducation/addUser", JSON.stringify({
            checked: el.checked,
            educationName: el.className,
            id: split(el.id, 0),
            name: split(el.id, 1)
          }));
        }));
        let elements2 = document.querySelector('.sort-box')
        elements2.addEventListener('change', event => {
          let text2 = "";
          item.list.forEach(function(value, index) {
            add2(elements2.value, value, index)
          })
          console.log("THIS IS TEXT: " + text2)
          document.getElementById("user-list").innerHTML = text2;

          function add2(educationName, value, index) {
            text2 = "";
            if (educationName == 'blank') {
              text2 += "<li id = TEST_" + value.identifier + ">" + value.identifier + " - " + value.firstname + " " + value.lastname + "(" + value.name + ") - Rang " + value.job_grade + "<br>" + " <input class=WEGA id =" + value.identifier + "_" + value.name + " type=checkbox " + getChecked(value.wega) + ">WEGA</input>" + " <input class=COBRA id=" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.cobra) + ">Cobra</input>" + " <input class=LKA id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.lka) + ">BK/LKA</input>" + " <input class=LVA id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.lva) + ">LVA</input>" + " <input class=ET id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.et) + ">ET</input>" + " <input class=STG id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.stg) + ">STG</input>" + " <input class=HELI id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.heli) + ">Libelle</input>" + " <input class=MOT id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.mot) + ">MOT</input>" + " <input class=SEIL id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.seil) + ">Seil</input>" + " <input class=TASER id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.taser) + ">Taser</input>" + " <input class=GSOD id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.gsod) + ">GSOD</input>";
            } else {
              if (educationName == 'wega' && value.wega == 1) {
                //console.log("THIS IS WEGA")

                text2 += "<li id = TEST_" + value.identifier + ">" + value.identifier + " - " + value.firstname + " " + value.lastname + "(" + value.name + ") - Rang " + value.job_grade + "<br>" + " <input class=WEGA id =" + value.identifier + "_" + value.name + " type=checkbox " + getChecked(value.wega) + ">WEGA</input>" + " <input class=COBRA id=" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.cobra) + ">Cobra</input>" + " <input class=LKA id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.lka) + ">BK/LKA</input>" + " <input class=LVA id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.lva) + ">LVA</input>" + " <input class=ET id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.et) + ">ET</input>" + " <input class=STG id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.stg) + ">STG</input>" + " <input class=HELI id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.heli) + ">Libelle</input>" + " <input class=MOT id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.mot) + ">MOT</input>" + " <input class=SEIL id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.seil) + ">Seil</input>" + " <input class=TASER id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.taser) + ">Taser</input>" + " <input class=GSOD id =" + value.identifier + "_" + value.name + " type = checkbox " + getChecked(value.gsod) + ">GSOD</input>";
              }
              console.log(value.identifier)
              console.log(text2)
            }
          }
        });

      } else {
        $("#container").hide();
      }
    });
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="container">
    <div id="containe-light">
      <h1 class="headline-1">LPD - Ausbildungsliste</h1><br><br><br>
      <p>Sortieren:
        <select name="sort-box" id="sort-box" class="sort-box">
          <option value="blank"></option>
          <option value="wega" id="wega-element">WEGA</option>
          <option value="cobra">COBRA</option>
          <option value="lka">BK/LKA</option>
          <option value="lva">LVA</option>
          <option value="et">ET</option>
        </select>
      </p>
      <p id="list">
        <p class="info-1">Ausbildungen:</p>
        <ul id="user-list"> NOT LOADED YET</ul>
      </p>
    </div>
  </div>
</body>

I hope someone can help me. Have a great day