如何通过初始化select2来防止我的ajax函数在另一个选择框之后添加一个?

我正在通过ajax添加一些数据,并在成功后将select2初始化到我的元素中。 我的问题是每次我改变 .project select 另一个 .icon select 已创建。所以如果我改变 .项目选择 10次我有11次 .icon selects 在我的页面上。但我只需要一个。

<script src="jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

剧本js公司:

     $(document).off("change", ".project").on("change", ".project", function (event) {
            $.ajax({
                url: "update.php",
                data: {
                },
                type: "POST",
                success: function (data) {
                   $("#result").html(data);
                 $(".icons").select2({
                    templateResult: formatState,
                    templateSelection: formatState_select
                  });
                }
            })
       });

使现代化php:

 <select class="icons">
       <?php include('icons.php'); ?>
 </select>

指数php

<select class="project">
    <option>A</option>
    <option>B</option>
</select>
<div id="result"></div>