select2 not working with cloned element - JavaScript

so i have the button that can clone the current <tr>. But select2 function only work on the first <tr> which its does'nt work on the cloned <tr>.

here my view code

<table class="table table-hover table-border" id="item-table">
    <thead>
        <tr>
            <th class="text-center" width="50">No</th>
            <th class="text-center">Nama Barang</th>
            <th class="text-center">Kuantitas</th>
            <th class="text-right"><a href="javascript:void(0)" class="btn btn-light" id="addMoreItem"><i class="fa fa-plus text-warning"></i> &nbsp;Add More Item</a></th>
        </tr>
    </thead>
    <tbody>
        <tr style="" id="original">
            <td width="50">
                <input type="number" name="sortOrder[]" value="1" id="sortOrder" min="1" max="10" class="border-0 text-center shadow-none" style="background-color: transparent;" readonly="">
            </td>
            <td>
                <div class="form-group row">
                    <div class="col-12">                    
                        <select name="item_name[]" id="item_name" class="form-control select2">
                            <option value="" selected disabled>{{ isset($purchase_order) ? $purchase_order->items->name : 'Pilih barang' }}</option>
                            @foreach($items as $fs)
                                <option value="{{ $fs->id }}">{{ $fs->name }}</option>
                            @endforeach
                        </select>
                        <div class="form-text text-muted">
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="form-group row ">
                    <div class="col-12">
                        <input type="text" name="item_quantity[]" id="bank_account" value="{{ old('bank_account') ? old('bank_account') : null }}" class="form-control" placeholder="Masukkan Kuantitas Barang">
                        <div class="form-text text-muted">
                        </div>
                    </div>
                </div>
            </td>
            <td class="text-center">
                <div class="" style="justify-content: center; height: 11px; margin-bottom: 43px;"><a id="delete" class="btn btn-danger"><span class="fa fa-trash" style="margin-top: 6px; color: white;"></span></a></div>
            </td>
        </tr>
    </tbody>
</table>

and here my script

    $(document).ready(function() {
        $(".select2").select2();
    });

    $(document).ready(function(){
        var count = 1; // row index
        $('#addMoreItem').on('click', function(){
            console.log("count = " + count);
            if(count <= 10){ // image upload limit = 10
                // if (count == 1) {
                //     tableShow();
                // }
                var lastRow = $("#item-table tr").last().find("#sortOrder").val();
                console.log("lastRow = "+lastRow);
                if (lastRow == null) {
                    lastRow = 0;
                }
                lastRow++;
                var table = $("#item-table");
                var original = $("#item-table tr:eq(1)");
                var clone = original.clone(true).appendTo("#item-table");
                newRow = clone.attr('class', 'clone');
                newRow.find("input").val("");
                newRow.find("#sortOrder").val(lastRow);
                count++;
            }
        });
        
        //delete x
        $('#delete').on('click', function(){
            if(count > 1){
                $(this).closest("tr").remove();
                count--;
                console.log("count = "+count);
            }
        }); 
    });