title: How to rename list on double click but keep the icons next to it
body: <p>I have a list with  along with icons , Im using this javascript function to allow user to rename the element and change it, but how do i make it so that the icon will still remain but the name will change? Currently i remove() the current name and replace it with the new one and obviously it would rem,ove the icon as well.. how do i keep the icon (could be multiple different ones) even tho the names change.</p>
  <p>List -</p>
  <pre><code>     &lt;ul id=&quot;sourceList&quot; class=&quot;sub-menu&quot; style=&quot;color:black; text-align: left; margin: 0; padding: 0;overflow-y: scroll;max-height: 350px; list-style:none;&quot; aria-expanded=&quot;true&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-image&quot;&gt;&lt;/i&gt;&lt;span&gt;SourceName&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-image&quot;&gt;&lt;/i&gt;&lt;span&gt;SourceName&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-image&quot;&gt;&lt;/i&gt;&lt;span&gt;SourceName &lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  <p>Javascript -</p>
  <pre><code> var oriVal;
  $(&quot;#sourceList&quot;).on('dblclick', 'a', function () {
      oriVal = $(this).text();
      $(this).text(&quot;&quot;);
      $(&quot;&lt;input type='text'&gt;&quot;).appendTo(this).focus();
  });
  $(&quot;#sourceList&quot;).on('focusout', 'a &gt; input', function () {
      var $this = $(this);
      $this.parent().text($this.val() || oriVal);
      $this.remove();
  });
  </code></pre>
  <p>See Fiddle example - <a href="https://jsfiddle.net/sqmnagwe/" rel="nofollow noreferrer">Rename List</a></p>