Javascript 使用select2下拉列表添加文件不起作用

在一个表单中，我有两个字段（article和quantity），我需要多次添加它们。这是我表格的一部分：

<div class="card-body">
    <table class="table table-bordered w-100" id="articles_table">
        <thead>
            <tr>
                <th>{{ __('smart.Name') }}</th>
                <th>{{ __('smart.Amount') }}</th>
            </tr>
        </thead>
        <tbody>
            <tr id="article0">
                <td width="50%">
                    <select name="articles[]" class="form-control selectpicker" data-live-search="true">
                        <option></option>
                        @foreach (\Smart\Models\Warehouse\Article::all() as $article)
                            <option value="{{ $article->id }}">
                                {{ $article->name }}
                            </option>
                        @endforeach
                    </select>
                </td>
                <td width="50%">
                    <input type="number" name="quantities[]" class="form-control">
                </td>
            </tr>
            <tr id="article1"></tr>
        </tbody>
    </table>

    <div class="row mt-2">
        <div class="col-md-12">
            <button id="add_row" class="btn btn-secondary float-right"><i class="fas fa-plus"></i> {{ __('smart.Article') }}</button>
            <button id='delete_row' class="btn btn-danger float-left"><i class="fas fa-minus"></i> {{ __('smart.Article') }}</button>
        </div>
    </div>
</div>

{{{（'smart.Name'）}
{{{（'smart.Amount'）}
@foreach（\Smart\Models\Warehouse\Article:：all（）作为$Article）
{{$article->name}
@endforeach
{{{（'smart.Article'）}
{{{（'smart.Article'）}

这是我的js部分

var row_number = 1;
$("#add_row").click(function(e){
    e.preventDefault();
    var new_row_number = row_number - 1;
    $('#article' + row_number).html($('#article' + new_row_number).html()).find('td:first-child');
    $('#articles_table').append('<tr id="article' + (row_number + 1) + '"></tr>');
    row_number++;
});

$("#delete_row").click(function(e){
    e.preventDefault();
    if(row_number > 1){
        $("#article" + (row_number - 1)).html('');
        row_number--;
    }
});

var行数=1；
$（“添加行”）。单击（函数（e）{
e、 预防默认值（）；
var new_row_number=row_number-1；
$（'#article'+行号）.html（$（'#article'+新行号）.html（））.find（'td:first child'）；
$（“#文章表”）。附加（“”）；
行数++；
});
$（“#删除#行”）。单击（函数（e）{
e、 预防默认值（）；
如果（行数>1）{
$（“#article”+（第1行））.html（“”）；
行号--；
}
});

但我在添加新行后遇到了一个问题，我可以选择任何内容（下拉菜单不起作用）

---

我遵循这一点

如果您动态显示select2，则在“附加”时您必须删除select to并重新设计select2您的意思是类似select2（“销毁”）的内容，然后在新添加的选择器上选择2？是的，这样我尝试查找新的select，如var articles=$（“#article”+行数）。查找（'select'）；然后我使用冠词。选择2（'destroy'）；和文章。选择2（）；但这是行不通的