I have two paragraphs. First I would like to separate each word in first, wrap it with span with id and then move for example 5 first words into second paragraph (with spaces). The problem is that I don't know if append(' ') is a good idea and the second problem is that after injection of the spans to the second paragraph width of it is too large (it should be 100px with text overlaping to next line juz like in first paragraph

here is my attempt

```
    <body>
<script type="text/javascript">
    $(function(){
        var obj = $('.p1')
        var text = obj.html().split(' '), len = text.length, result = [];
                for( var i = 0; i < len; i++ ) {
                    result[i] = '<span id="'+i+'">' + text[i] + '</span>';
                }
                obj.html(result.join(' '));

            var words = $('.p1').find('span');
            for(var i = 0; i < 5; i++){
                $('.p2').append($(words[i]).clone());
                $('.p2').append('&nbsp;');
            }
    });
</script>

<div class="test" style="width:100px">
<p class="p1">
test1 test2 test3 test4 test5 test6 test7 test8
</p>
</div>
<div class="test" style="width:100px">
<p class="p2">
</p>
</div>
</body>

```