jquery - 如何在附加的div中使用jQuery insertAfter而不在ajax调用中重叠？

Question

我正在使用 jQuery Bracket 库（http://www.aropupu.fi/bracket/）。我有三个游泳池（锦标赛括号），我想为每个游泳池命名，但它们在游泳池后面。

我的 Ajax 调用：

var minimal0 = $('<div id="#minimal0"></div>');
var minimal1 = $('<div id="#minimal1"></div>');
var minimal2 = $('<div id="#minimal2"></div>');

var pooltitle0 = $('<div id="#pooltitle0"><h3>Pool A</h3></div>');
var pooltitle1 = $('<div id="#pooltitle1"><h3>Pool B</h3></div>');
var pooltitle2 = $('<div id="#pooltitle2"><h3>Pool C</h3></div>');

$("#gerar_grelha_inscritos_btn").on("click", function () {
    var competicao_id = $('#gerar_grelha_inscritos_btn').attr('data-id');
    var designacao = 'Pool A';
    $.ajax({
        url: "<?php echo base_url(); ?>" + "competicoes/grelha_competicao/sortear_atletas",
        data: {competicao_id: competicao_id, designacao: designacao},
        type: "POST",
        datatype: "text",
        success: function (response) {
            var atletas = response;
            $('#minimal').empty();

            $('#minimal').append(minimal0);
            minimal0.bracket({
                init: {"teams": atletas[0]}
            });

            $('#minimal').append(minimal1);
            minimal1.bracket({
                init: {"teams": atletas[1]}
            });

            $('#minimal').append(minimal2);
            minimal2.bracket({
                init: {"teams": atletas[2]}
            });

            pooltitle0.insertBefore(minimal0);
            pooltitle1.insertAfter(minimal1);
            pooltitle2.insertAfter(minimal2);
        }
    });

});

我的观点：

<div id="minimal" class="demo"></div>

我的结果：