initialize select2 more than twice, but first select2 element got reset

i try to use select2 to make my select input easier to find data, here’s my js and html

<table class="mt-2.5">
<thead>
    <tr>
        <th>Item Name</th>
        <th>Item Qty</th>
        <th>Item Price</th>
        <th>Item Total</th>
        <th>Action</th>
    </tr>
</thead>
<tbody id="items">
    <tr id="items_sample">
        <td>
            <select name="items[]['inventory_id']" id="items[]['inventory_id']"
                class="item_box w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary">
                <option value="" disabled selected>Select Item</option>
                @foreach($inventories as $inventory)
                <option value="{{ $inventory->id }}">{{ $inventory->name }}
                </option>
                @endforeach
            </select>
        </td>
        <td>
            <input type="number" name="items[]['qty']" id="items[]['qty']"
                class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary">
        </td>
        <td>
            <input type="number" name="items[]['price']" id="items[]['price']"
                readonly
                class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary">
        </td>
        <td>
            <input type="number" name="items[]['total']" id="items[]['total']"
                readonly
                class="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary">
        </td>
        <td>
            <center><a href="javascript:void(0)" onClick="removeItem(this)"
                    class="hover:text-primary" title="Remove Item"><i
                        class="fi fi-rr-trash"></i></a></center>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="3"><b>Total</b></td>
        <td colspan="2"><b id="total">Rp 0,00</b></td>
    </tr>
</tfoot>
</table>

let’s focus on <select.... only with class item_box, and here’s my javascript with first select2 init

var items_sample = null; //variable to save html that i want to clone

$(document).ready(function () {
    items_sample = $("#items_sample").html();
    $('.item_box').select2(); //first select2 when dom is loaded
});

$("#addnewitem").click(function() {
    $("#items").append("<tr>" + items_sample + "</tr>"); //append the cloned html
    var current_item = $("#items").children().last(); //get latest html dom
    current_item.find(".item_box").attr("class", "item_box_" + $("#items").children().length + " w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"); //rename the class to add _index, example item_box_2, item_box_3, item_box_n
    $(".item_box_" + $("#items").children().length).select2(); //select2 ini for the cloned html
});

when the page is loaded, the first select2 .item_box is a success, but when I try (let’s say click button #addnewitem to append cloned html to #items) to click button #addnewitem. the first select2 .item_box is reset/becomes a normal select form and the select2 change to a new select form .item_box_2.

how to fix it?