Wrap individual character in <span> on keyUp using jQuery
<p>I want to wrap each character to wrapped in a <code>&lt;span&gt;&lt;/span&gt;</code> and desire output is <code>&lt;span&gt;a&lt;/span&gt;&lt;span&gt;b&lt;/span&gt;&lt;span&gt;c&lt;/span&gt;</code>.</p>

<p>I have tried following but its not helping.</p>

<p><strong><a href="https://jsfiddle.net/aau75w9q/1/" rel="nofollow noreferrer">JSFIDDLE</a></strong></p>

<pre><code>&lt;div contenteditable="true" id="text1" type="text" placeholder="type something..."&gt;

$(function() {
  $("#text1").keyup(function(event) {
    $(this).wrapInner( "&lt;span class='test'&gt;&lt;/span&gt;" )
  });
});
</code></pre>

<p>It outputs following; which is not what I required. Any help?</p>

<pre><code>&lt;span class="test"&gt;
&lt;span class="test"&gt;
    &lt;span class="test"&gt;
        &lt;span class="test"&gt;ffdf&lt;/span&gt;
        &lt;/span&gt;
    &lt;/span&gt;
&lt;/span&gt;
</code></pre>