Omit the elements with similar text and leave only one with jquery
<p>I have a list like this:</p>

<pre><code>&lt;ul&gt;
   &lt;li&gt;
     &lt;span&gt;USA:&lt;/span&gt; Newyork
     &lt;span&gt;USA:&lt;/span&gt; Dallas
   &lt;/li&gt;
   &lt;li&gt;
     &lt;span&gt;France:&lt;/span&gt; Paris
     &lt;span&gt;France:&lt;/span&gt; Lyon
     &lt;span&gt;France:&lt;/span&gt; Toulouse
   &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Edit:
I want this:</p>

<pre><code>&lt;ul&gt;
   &lt;li&gt;
     &lt;span&gt;USA:&lt;/span&gt; 
        Newyork
        Dallas
   &lt;/li&gt;
   &lt;li&gt;
     &lt;span&gt;France:&lt;/span&gt; 
        Paris
        Lyon
        Toulouse
   &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I want to leave only one <code>USA</code> and <code>France</code> and list their cities below countries.
How can I do this with jQuery?</p>

<p>Thanks in advance</p>
