Gridstack Problem

Adding nested items works only the first time. Second time it adds it to the row under the first.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.3/gridstack.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.3/gridstack.min.css">
<button class="btn btn-primary add-widget-box">Add a new widget</button>
<div class="grid-stack" data-gs-width="12">
    
</div>

CSS

.grid-stack-item-content {
    background: rgba(255, 0, 0, 0.1);
}

JavaScript

$(function () {
 
    $('.grid-stack').gridstack({
        animate: true,
        auto: true,
        width: 12,
        float: true,
        vertical_margin: 0,
        always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
        resizable: {
            handles: 'e, se, s, sw, w'
        }   
    });
    
    $('.grid-stack-placeholder').remove();
    
    this.grid = $('.grid-stack').data('gridstack');
    
    this.add_widget = function(){

        var id = getRandomInt(1111,9999);
        
        var el = $.parseHTML("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
        this.grid.add_widget(el, 0, 0, 6, 5, true);

        $('.grid-stack-item-content[data-id="'+id+'"]').append('<span class="fa fa-times remove-widget"> </span><span class="fa fa-pencil select-use"></span>  </span><span class="fa fa-plus add-nested-widget-box"></span> ');
          
    }.bind(this);
    
    this.clear_grid = function () {
        this.grid.remove_all();
    }.bind(this);
    
    $('.clear-customization, .customize-pages-list li').click(this.clear_grid); 
    $('.add-widget-box').click(this.add_widget);
    
});

$('body').on('click', '.remove-widget', function(){
    
    var grid = $('.grid-stack').data('gridstack');
    
    grid.remove_widget($(this).parents().eq(1));
    
});

$('body').on('click', '.add-nested-widget-box', function(){

        $(this).parent().append('<div class="grid-stack">\
                                <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content"><span class="fa fa-times remove-widget"> </span><span class="fa fa-pencil select-use"></span>  </span><span class="fa fa-plus add-nested-widget-box"></span> </div></div>\
                            </div>');

    $('.grid-stack').gridstack({
        animate: true,
        auto: true,
        width: 12,
        float: true,
   ...