JSFiddle - React, Tailwind, and code Playground

HTML

<p>Sort</p>
    <ul>
      <li>Key Roles and Functions</li>
      <li>Leadership Clarity</li>
      <li>Margin</li>
      <li>Market Differentiation</li>
      <li>Market Maturity</li>
      <li>Maturity</li>
      <li>Mission</li>
      <li>Vision</li>
      <li>Objectives</li>
      <li>Operational Efficiency</li>
      <li>Outlet Characteristics</li>
      <li>Overall Measurements</li>
      <li>Overall Performance</li>
      <li>Overall Systems</li>
      <li>Pain Points</li>
      <li>Performance</li>
      <li>Positive Culture</li>
      <li>Price Optimization</li>
      <li>Promotion Strategy</li>
      <li>Sales Model</li>
      <li>Stickiness</li>
    </ul>

CSS

ul{
    list-style-type:none;
    width:200px;
    background:#bdbdbd;
}

JavaScript

$(function() {
  var noSortedTxts = [];
  var sortedTxts = [];
  var sort = true;

  $('p').click(function() {
    
    var list = $('ul');
    if (noSortedTxts.length === 0) {
      var listitems = list.children('li').get();

      $.each(listitems, function(idx, itm) {
        noSortedTxts.push($(itm).text());
      });

      sortedTxts = noSortedTxts.slice(0);
      sortedTxts.sort(function(t1, t2) {
        return t1.toUpperCase().localeCompare(t2.toUpperCase());
      });
    }

    if (sort) {
      list.empty();
      $.each(sortedTxts, function(idx, txt) {
        list.append('<li>' + txt + '</li>');
      });
      sort = false;
    } else {
      list.empty();
      $.each(noSortedTxts, function(idx, txt) {
        list.append('<li>' + txt + '</li>');
      });
      sort = true;
    }
    
  });
});