Javascript JQuery克隆Select2输入

我有一些类似的HTML

<table class="table table-bordered table-hover" id="actionTable">
    <thead>
    <tr >
        <th class="text-center">Action</th>
        <th class="text-center">Responsibility</th>
        <th class="text-center">Completion Date</th>
    </tr>
    </thead>
    <tbody>
    <tr id='actionRow'>
        <td>
            <input type="text" name='actionInput'  placeholder='Action' class="form-control"/>
        </td>
        <td>
            <select class="responsibility" name="responsibilityInput" id="responsibilityInput">
                <option value="OptionOne">Option One</option>
                <option value="OptionTwo">Option Two</option>
                <option value="OptionThree">Option Three</option>
                <option value="OptionFour">Option Four</option>
            </select>
        </td>
        <td>
            <input type="text" name='dateInput' placeholder='Completion Date' class="form-control"/>
        </td>
    </tr>
    </tbody>
</table>
<a id="add_row" class="btn btn-default pull-right">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>

行动
责任
竣工日期
选择一
选择二
选择三
选择四
如您所见，行已成功克隆。但是，在克隆行上，“选择”框不再起作用。这是因为我需要在克隆select之前销毁它。这个答案更好地解释了这个问题

但是，我怎样才能在我的情况下应用这一点呢？我正在克隆整行，而不是单个select输入？如何单独克隆select，但仍将其保留在需要的位置

谢谢你的帮助

谢谢
Hi Kate，我想问题可能是由于您的select输入没有唯一的ID。您也可以将该行的内容附加到表体，而不是克隆。它应该使它变得简单一点。尽管你应该像上面@Bruno所说的那样修复
id
。谢谢。奇怪的是，它似乎在小提琴上起作用，但在我的实际页面上却不起作用。它抱怨正在对非select-2元素调用destroy