jQuery & miniColors - set color

Question

When you clik on add new button, jQuery inserts new dragrable DIVs with miniColor plugin to the CONTAINER. But in this DIVs you can not see miniColor element until you first time click on the DIV.

jsfiddle Example - http://jsfiddle.net/ynternet/m7c7e/4/

1. Why is miniColor element showing after first click on the DIV ?
2. How to change background color ?
3. How to change font color ?

HTML

<div id="add" style="background:yellow; width:100px;cursor:pointer"> add new </div>
<div id="container"> </div>

jQuery

function handler() {
    if ($(this).find("#menu").length) {
        return;
    }
    $('input').miniColors({                         
       opacity: true
    });
    var currentIndex = parseInt($(this).css('z-index'), 10);
    var newIndex = currentIndex + 1;
    $(this).css('z-index', newIndex);
}
$("#add").on({
    click: function(e) {
        var timestamp = Date.now();
        var posx = Math.floor(Math.random() * 400);
        var posy = Math.floor(Math.random() * 400);
        $('#container').append(function() {
            return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posy + 'px; cursor:pointer;">Click me, drag, change z-index & color <input type="hidden" name="color" value="#FFCC00" data-opacity=".5" /> </div>').click(handler).draggable({
                containment: "#container",
                scroll: false,
                cursor: 'lock'
        });
    });
    }
});

CSS

#container {
    width:500px;
    height:500px;
    background: palegoldenrod;
    position: relative;
    top:20px;
    left: 100px;
    padding: 0px;
    z-index:2;
}
.add_to_this {
    padding:5px;
    position: absolute;
    display:inline-block;
    background: yellowgreen;
    width:200px;
    height:70px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    z-index:100;
}

Answer 1

That is because you seem to append the minicolor to the Div in the click(handler) function..

.click(handler);

You are setting up the minicolor box in the handle function which is fired when you click the div..