如何在JQuery中将无序列表中的列表项分组？

Question

我有一个包含多个组的无序列表产品。每个组可以具有一个或多个产品，并且一个产品可以位于任何组中。我想根据产品的组名对产品进行分组。

这里的类名代表组名。

<ul id="ulProdList">
<li class="NA">PP1</li>
<li class="A">PP1</li>
<li class="A">PP2</li>
<li class="A">PP3</li>
<li class="NA">PP4</li>
<li class="A">PP5</li>
<li class="B">PP1</li>
<li class="B">PP6</li>
<li class="NA">PP7</li>
<li class="NA">PP8</li>
<li class="B">PP2</li>
<li class="C">PP8</li>
<li class="NA">PP9</li>
</ul>

结果应该是

<ul id="ulProdList">
<li class="NA">PP1</li>
<li class="A">PP1</li>
<li class="A">PP2</li>
<li class="A">PP3</li>
<li class="A">PP5</li>
<li class="NA">PP4</li>
<li class="B">PP1</li>
<li class="B">PP6</li>
<li class="B">PP2</li>
<li class="NA">PP7</li>
<li class="NA">PP8</li>
<li class="C">PP8</li>
<li class="NA">PP9</li>
</ul>

请帮助我。