Ajax problem with Carousel

I have a series of Actions grouped by categories that are in a carousel.

When clicking on a Category, the actions on the same carousel must be displayed by ajax.

It worked perfectly before incorporating the carousel, it received the data well (and I still receive it) from the ajax, the problem is when it comes to "creating" the carousel in the Javascript.

You can see how in the carousel of categories in the html, I believe it and it works perfectly, the categories are coming out, and when I click on a category it goes to the < < removeActionsCategory > and the alert gives me the results as a result, but when I go to "Build" the carousel of the actions in javascript, nothing is shown in the html.

Could you please help me?

<main>

    <!--Carrusel-->
    <div id="ficha">
        <div id="demo" class="carousel slide" data-ride="carousel"> 

            <!-- The slideshow cambia el tamaño de la img-->
            <div class="carousel-inner">
                <?php
                if (isset($categoria)) {


                    $contador = 1;
                    foreach ($categoria as $valor) {
                        ?> 
                        <div class="carousel-item ficha <?php if ($contador == 1) {
                    echo 'active';
                } ?> "> 
                            <?php
                            echo '<form  method="post" class="cate">';
                            echo '<input type="hidden" name="_token" value="' . csrf_token() . '">';
                            echo '<input type="hidden" value="' . $valor->id_categoria . '" id="categoria" name="categoria" />';
                            echo '<div class="centrado">';
                            echo '<button type="submit"><img src="' . $valor->imagen . '" class="img-responsive"></button>';
                            echo '<p>' . $valor->descripcion . '</p>';
                            echo '</div>';
                            echo '</form>';
                            echo '</div>';
                            $contador = 0;
                        }
                    } else {
                        //imagen de error
                    }
                    ?> 

                </div><!--Fin slideshow--> 

                <!-- Left and right controls -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a> 
            </div> <!--Fin carrusel-->
        </div> <!--Fin Ficha-->
</main> 
<!--Fin Main-->
<footer>
</footer>

<script>
    var album = [];
    var sonidosTablero = [];
    var fases_favoritas = [];
    var accionesSeleccionadas = [];

    $('form').on('submit', function (evt) {
        evt.preventDefault(); // Esto anula el comportamiento por defecto del formulario 
        var data = $(this).serialize();
        var url = "";

        if ($(this).closest("form").attr('id') == 'buscador') {

            url = "../resources/views/usu/buscar_ajax.php";
        } else {

            url = "../resources/views/usu/categorias_ajax.php";
        }

        $.post(url, data, function (respuesta) {
            if (respuesta) {
                alert(respuesta);
                sacarAccionesCategoria(respuesta);
            } else {
                alert('ERROR DE AJAX');
            }
        }).fail(function (error) {
            alert("Error: " + error.status);
        });

    });

    function sacarAccionesCategoria(msg) {

        alert('Respuesta del servidor:' + msg);
        var ob = JSON.parse(msg);
        var longitud = Object.keys(ob).length;
        alert(longitud);
        //borrar todo el codigo Html que hubiera escrito 
        $('#ficha').html(" ");

        for (var i = 0; i < longitud; i++) {

            var id_nombre = "nombre_ficha" + i;
            var id_imagen = "imagen_ficha" + i;
            var id_sonido = "sonido_ficha" + i;
            var id_accion = "accion" + i;

            var form = $("<form/>",
                    {method: 'post',
                        class: 'accioform1 col-md-3',
                        id: i
                    }

            ).on('click', function (evt) {

                evt.preventDefault(); // paras el envio tradicional del formulario;

                var identificador = $(this).find(".idef").val();
                alert(identificador);
                var img = $(this).find(".imgf").attr('src');
                alert(img);
                var son = $(this).find(".sound").attr('src');
                alert(son);
                AlmacenarPictograma(identificador, img, son, 0);

            });//fin onclick etiqueta formulario


            var contenido = "<div id='demo' class='carousel slide' data-ride='carousel'> <div class='carousel-inner'>";

            if (i == 0) {
                contenido += "<div class='carousel-item ficha active'> ";
            } else {
                contenido += "<div class='carousel-item ficha'> ";
            }

            form.append('<input type="hidden" class="idef" value="' + ob[i].id_accion + '"  id="' + id_accion + '" name="idaccion"/>');
            form.append('<input type="image" name="" class="img-responsive imgf" src="' + ob[i].imagen + '" id="' + id_imagen + '" value=""/>');
            form.append('<audio id="' + id_sonido + '" src="' + ob[i].sonido + '" class="sound"></audio>');
            form.append('<p name="nombre" id="' + id_nombre + '">"' + ob[i].nombre + '"</p>');

            contenido.append(form);

            contenido += "</div>";
            contenido += "<a class='carousel-control-prev' href='#demo' data-slide='prev'><span class='carousel-control-prev-icon'></span> </a> <a class='carousel-control-next' href='#demo' data-slide='next'> <span class='carousel-control-next-icon'></span></a> </div>  ";



            $("#ficha").append(contenido);


        }//Fin For         
    }//Fin funcion

</script>