how to wrap each letter to tag “span” and add the same id

问题

This is what i have now: DEMO

Need for each letter add ID same as letter in span... like this:

<span id="t">t</span>
<span id="e">e</span>
<span id="s">s</span>
<span id="t">t</span>

Thanks

HTML:

<div id="page-wrap">
<div class="form_floleft">
    <form>
        <label for="">Your word:</label> <input class="text_field" type="text" name="your_word" placeholder="enter here">
    </form>
    <div class="enter">ENTER</div>
</div>
<div class="txt"></div>
<p></p>

</div>

JS:

(function($){
jQuery(document).ready(function(){
$(".enter").live('click', function(){
        var value = jQuery("input.text_field").val();
        jQuery(".txt").text(value);
        var words = $('.txt').text().split("");
        var text = words.join("</span><span>");
        $("p").html("<span>" + text + "</span>");
    });
});
})(jQuery);

回答1:

why not try:

(function($){
jQuery(document).ready(function(){
$(".enter").live('click', function(){
    var value = jQuery("input.text_field").val();
    jQuery(".txt").text(value);
    var words = $('.txt').text().split("");
    for (i in words)
        words[i] = '<span id="' + words[i] + '">' + words[i] + '</span>';   
    var text = words.join('');
    $("p").html(text);
});
});
})(jQuery);

来源：https://stackoverflow.com/questions/16263766/how-to-wrap-each-letter-to-tag-span-and-add-the-same-id