How to use jQuery insertAfter in a appended div without overlap in ajax call?

Question

I am using the jQuery Bracket library (http://www.aropupu.fi/bracket/). I have three pools (tournament brackets) and i want give a title for each pool but they are behind the pools.

My Ajax Call:

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);
        }
    });

});

My view:

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

My result: