Jquery 动态追加html时选择2个无法正常工作的标记

我使用select2的形式是使用jquery追加行，但如图所示，当我追加新行时，虽然select2工作正常，但其宽度没有正确调整。我知道这个问题可能与重新初始化select2插件有关，但不知怎的，我想我能解决它

    $("#dynamicTable").append(`
                <tr>
                    <td><label class="option">Option${i}</label></td>
                    <td>
                        <select name="key${i}" id="" class="form-control key">
                            <option value="size">Size</option>
                            <option value="color">Color</option>
                            <option value="material">Material</option>
                            <option value="style">Style</option>
                            <option value="title">Title</option>
                        </select>
                    </td>
                    <td><select class="form-control value" id="arr${i}" multiple="multiple" name="value${i}[]"></select></td>

                    <td><button type="button" class="btn btn-danger remove-tr" id="${i}">Remove</button></td>

                </tr>
                `);

                $(".value").select2({
                    tags: true,
                    tokenSeparators: [',', ' '],
                });

$（“#dynamicTable”）.append(`
选项${i}
大小
颜色
材料
风格
标题
去除
`);
$（“.value”）。选择2({
标签：是的，
标记分隔符：['，'，'']，
});

---

下面是代码，当我们附加一行时，一个具有.value类的select标记被附加到html中。

您能分享这样做的代码吗？例如：追加新行的代码和确保select2初始化（包括

select

元素）是的，我现在通过添加代码编辑了我的问题。您没有在

.value

选择框中追加任何选项吗？