Javascript jQuery+；在不同的时间多次附加克隆？

我有一个表单，其中有一个部分，用户可以指定不确定数量的值对，特别是一种语言和熟练程度

我的DOM结构如下：

<ul id="language-list">
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
</ul>
<input type="button" value="Add another language..." id="add-a-language" />

<li class="user-language-item hidden" id="placeHolderLi">
    <select name="language[]" class="user-language-select">...</select>
    Level: <select name="proficiency[]">...</select>
    <input type="button" value="Remove" class="remove-language" />
</li>

但克隆似乎只能使用一次。第二次单击

添加语言…

按钮时，不会附加任何列表项。（有趣的是，当我在控制台上输出变量时，它仍然包含克隆！）

一种解决方法是将HTML标记保存为字符串，但我避免使用这种方法，因为元素是通过PHP动态加载的，每当需要修改标记时，我宁愿只更改代码的一部分

---

我怎样才能做到这一点呢？

每次添加时，您都必须克隆它

 $('#add-a-language').click(function(){
       var liItem = $('.user-language-item').last().clone(); 
        //Append the clone to the list item. But this only works once!
        $('#language-list').append(liItem);

    });

根据评论：

保持这样一个李：

<ul id="language-list">
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
</ul>
<input type="button" value="Add another language..." id="add-a-language" />

<li class="user-language-item hidden" id="placeHolderLi">
    <select name="language[]" class="user-language-select">...</select>
    Level: <select name="proficiency[]">...</select>
    <input type="button" value="Remove" class="remove-language" />
</li>

然后，在克隆时，您总是克隆此li并使其可见，这样即使用户删除了所有li，也可以添加新元素

$('#add-a-language').click(function(){
      var liItem = $('.user-language-item:first').clone(true).show();
      //Append the clone to the list item. But this only works once!
      $('#language-list').append(liItem);
 });

---

我理解这一点。但正如我上面所说明的，我不能依赖于此，因为用户可以通过“删除”按钮删除所有列表项，并且不会有任何要克隆的项。