Remove dynamicly created select2 selected value from the list of ajax data

i have this Api, thi api fetch data to feed select2 ajax

 public async Task<IActionResult> Search(string term)
    {
        try
        {
            var data = await _context.ScrapCodes
                .Where(sc => sc.Name.Contains(term) || sc.Code.ToString().Contains(term))
                .ToListAsync();
            return Ok(data);
        }
        catch (Exception)
        {
            return Ok();
        }
    }

this function will initialize select 2 form with new id

function initializeSelect2(elem) {
            elem.select2({
                placeholder: "search here",
                allowClear: true,
                width: 'resolve',
                ajax: {
                    url: "/api/digitalization/search",
                    contentType: "application/json; charset=utf-8",
                    data: function (params) {

                        var query =
                        {
                            term: params.term,
                        };
                        return query;
                    },
                    headers: {
                        "RequestVerificationToken":
                            $('input[name="__RequestVerificationToken"]').val()
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.code,
                                    text: item.code + ' - ' + item.name
                                }
                            })
                        }
                    }
                }
            });
        }

this button function to add new select2 eachtime it clicked

 $("#add_select").on("click", function () {
            var div1 = $("<div id ='scp_"+ele+"' class='col-md-8'>");
            var div2 = $("<select id='scrap_code" + ele + "' name='scrap_code" + ele + "' class='form-control _select2' placeholder='Code scrap' />");
            var div3 = $("</div>" +
                "<div class='col-md-4'>" +
                "<input id='scrap_val" + ele + "' name='scrap_val" + ele + "' class='form-control' placeholder='jumlah scrap' />" +
                "</div>");
            var div4 = $("<input type='button' id='_delete"+ele+"' value='Remove' />");
            $("#id_select").append(div1);
            $("#id_select").append(div2);
            $("#id_select").append(div4);
            $("#id_select").append(div3);
            
            initializeSelect2(div2);
            ele++;
            startElement.val(++value);
            $(div4).on('click', function (e) {
                e.preventDefault();
                $(div2).select2('destroy');
                var elem = document.parentElement(div4);
                elem.parentNode.removeChild(elem)
                startElement.val(--value);
            });

        });

What should i do if i want to remove selected item from select list each time the value is selected from dynamicly created select2 form?