jQuery Tag-it: copy tags from one list to another

Question

I have two jQuery Tag-it and i need a jQuery function which copies all the tags from one ul list to the other.

Definition of the two lists:

$('#keywordList1').tagit({
        itemName : 'item',
        fieldName : 'tags',
        caseSensitive : false,
        allowSpaces : true
});

$('#keywordList2').tagit({
        itemName : 'item2',
        fieldName : 'tags',
        caseSensitive : false,
        allowSpaces : true
});

EDIT:

The 1st solution from thecodeparadox

$('#keywordList2').append( $('#keywordList1 li').clone() )

works, but when you look at a regular tag-it list it creates a input-field for entering new tags wrapped in the last <li> element (with class tagit-new).

The solution with append has the effect that the destination list has now two input fields:

keywordList1

<ul style="position: relative; left: 12px; width: 374px;"
class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all tagit ui-widget-content"
id="keywordList1">
<li
    class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span
    class="tagit-label">keyword1</span><a class="tagit-close"><span
        class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input
    type="hidden" name="item[tags][]" value="keyword"
    style="display: none;"></li>
<li
    class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span
    class="tagit-label">keyword2</span><a class="tagit-close"><span
        class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input
    type="hidden" name="item[tags][]" value="keyword2"
    style="display: none;"></li>
<li class="tagit-new"><input type="text"
    class="ui-widget-content ui-autocomplete-input" autocomplete="off"
    role="textbox" aria-autocomplete="list" aria-haspopup="true">
    <input type="text" class="ui-widget-content ui-autocomplete-input"
    autocomplete="off" role="textbox" aria-autocomplete="list"
    aria-haspopup="true"></li>

keywordList2

<ul style="position: relative; left: 12px; width: 374px; top: 20px;"
class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all tagit ui-widget-content"
id="keywordList2">
<li class="tagit-new"><input type="text"
    class="ui-widget-content ui-autocomplete-input" autocomplete="off"
    role="textbox" aria-autocomplete="list" aria-haspopup="true"></li>
<li
    class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span
    class="tagit-label">keyword1</span><a class="tagit-close"><span
        class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input
    type="hidden" name="item[tags][]" value="keyword1"
    style="display: none;"></li>
<li
    class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span
    class="tagit-label">keyword2</span><a class="tagit-close"><span
        class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input
    type="hidden" name="item[tags][]" value="keyword2"
    style="display: none;"></li>
<li class="tagit-new"><input type="text"
    class="ui-widget-content ui-autocomplete-input" autocomplete="off"
    role="textbox" aria-autocomplete="list" aria-haspopup="true"></li>

Any idea how to remove the first input-element?

EDIT2: The updated solution from thecodeparadox works much better. i have extended the script so that the first <li> (holding the input-field) is moved to the end of the list:

$('#keywordList2').append( $('#keywordList1 li:not(:last)').clone() )
$('#keywordList2').append( $('#keywordList2 li:first') )

I am sure ist can be written shorter in jQuery-style

Answer 1

I should have read the documentation of the jQuery Tag-it before asking!

There are jQuery Tag-it methods which can do exactly what i need:

    $($('#keywordList1').tagit('assignedTags')).each(function() {
        $('#keywordList2').tagit('createTag', this);
    });

The main advantage ist that the createTag-operation makes sure that only tags are added, which does not exist in the destination list.

Answer 2

            $('#keywordList1').tagit({

                onTagClicked: function(event,ui){
                    $('#keywordList2').tagit("createTag",ui.tagLabel);
                }

            });