I developed a dynamic carousel. Within a form I show several records and the ID of these records is related to n number of images that I show in a carousel, making it have n number of the carousel with n number of images each.

The problem is in the visualization. When I start to play with the carousels several times, they start to show the superimposed images mixing both images, for example.

My question is, what should I "clean" when loading the images so that things like this don't happen?

I execute this function JavaScript, Ajax to arm the carousel:

    function GetEvidenceScrap(id)
{
    var idcompleto = id.id;
    var i = 0;
    var idbutton = idcompleto.substring(2, idcompleto.length);
        $.ajax({
            method: "GET",
            url: "Coordinador/GetEvidenceScrap",
            contentType: "aplication/json; Charset=utf-8",
            data: { 'idscrap': idbutton },
            async: true,
            success: function (result) {
                console.log("Longitud: " + result.length);
                while (i < result.length)
                {
                    var carousel = document.getElementById('CI_' + idbutton);
                    if (i == 0)
                    {
                        var div = document.createElement('div');
                        div.setAttribute('class','carousel-item active');
                        var img = document.createElement("img");
                        img.setAttribute('class', 'd-block w-100');
                        div.appendChild(img);
                        img.setAttribute('src', '/Evidence/' + result[i].rutevidencia);
                        carousel.appendChild(div);
                        i++;
                    }
                    else
                    {
                        var div = document.createElement('div');
                        div.setAttribute('class', 'carousel-item');
                        var img = document.createElement('img');
                        img.setAttribute('class', 'd-block w-100');
                        div.appendChild(img);
                        img.setAttribute('src', '/Evidence/' + result[i].rutevidencia);
                        carousel.appendChild(div);
                        i++;
                    }   
                }
                console.log(result);
            }
        });

Function in C#:

[HttpGet]
    public List<Evidencia> GetEvidenceScrap(int idscrap)
    {
        var idscrapparametro = new SqlParameter("@idscrap", idscrap);
        var listaevidencescrap = _context.Evidencias.FromSqlRaw($"SELECT IDRegistro, IDScrap, rutevidencia FROM dbo.F_GetEvidenceScrap(@idscrap)", idscrapparametro);
        return listaevidencescrap.ToList();
    }

Thank you