Insert element as second to last in JQuery

Question

I have built a grid of elements using the Gridly library and want the last element to be a button that allows more to be added. Each time this button is clicked, it should add a new element as the second to last, where the button to add more remains at the end.

I am currently trying the "last" psuedo-selector in combination with .append, .before, and so on. but not having any luck. Even using the following code, it continues to add the new elements at the very end. Is there anything I am missing that would be causing this?

Creating all of the default brick elements:

    success: function(data)
    {
        var cycle = data['cycle'].result;

        $.each( cycle, function( key, value )
        {
            var brick = "<div class='brick small' data-map='" + value + "'><a class='delete' href='#'>&times;</a><img src='images/tf2/" + value + ".jpg' onerror=\"javascript:this.src='images/default.jpg'\" /><h2><span>" + value + "</span></h2></div>";
            $( ".gridly" ).append( brick );
        });

        var addBrick = "<div class='brick small'><a class='add' href='#'><img src='images/add.jpg' /><h2><span>Add New</span></h2></a></div>";
        $( ".gridly" ).append( addBrick );

        return $('.gridly').gridly();
    }

Callback to add a new brick to the grid

$(document).on("click", ".gridly .add", function(event)
{
    event.preventDefault();
    event.stopPropagation();

    var brick = "<div class='brick small' data-map='ctf_2fort'><a class='delete' href='#'>&times;</a><img src='images/tf2/ctf_2fort.jpg' onerror=\"javascript:this.src='images/default.jpg'\" /><h2><span>ctf_2fort</span></h2></div>";

    $('.brick:last').before(brick);
    return $('.gridly').gridly();
});

Answer 1

Use

$(document).on("click", ".gridly .add", function(event)
{
    event.preventDefault();
    event.stopPropagation();

    var brick = "<div class='brick small' data-map='ctf_2fort'><a class='delete' href='#'>&times;</a><img src='images/tf2/ctf_2fort.jpg' onerror=\"javascript:this.src='images/default.jpg'\" /><h2><span>ctf_2fort</span></h2></div>";
    $( brick ).insertBefore( $(this).parent() );
    return $('.gridly').gridly();
});

EDIT Because the gridly plugin add style for each brick "style="position: absolute; left: Xpx; top: Ypx;", doesn't matter where the element in inserted because all briks already has a static position and after gridly() call method, only new briks is updated. So, to deal with this, we should to make a copy of brick button, add the be brick, add a brick button and remove the old brick button and after this, we cand call gridly() method. see JSFiddle example

var brick,button;
    brick = "<div class='brick small'><div class='delete'>&times;</div></div>";
    add_button = "<div class='brick small'><a class='add' href='#'>Add</a></div>";
$('.gridly').on("click", ".add", function(event) {
    event.preventDefault();
    event.stopPropagation();
    $('.gridly').append( brick);
    $('.gridly').append( add_button);
    $(this).closest('.brick').remove();
    $('.gridly').gridly();
});
$('.gridly').gridly();