CSS Rules Not Being Applied To Dynamically Generated Elements

I have dynamic created box, which should appear on click. It works ok, but css style sheet is not picking dynamic elements. Please see msg_head. The box consists of msg_head, msg_b

Solution 1:

$(document).on("click", '.nameid', function(e) {
    e.preventDefault(e);
    var parent = document.getElementById('ft');

    var mbox = document.createElement('div');
    mbox.id = 'mb';
    mbox.className = 'msg_box';

    var mhead = document.createElement('div');
    var mx = document.createElement('div');

    mhead.id = 'bb';
    mhead.className = 'msg_head';
    mx.id = 'x'
    mx.className = 'close';


    var mbody = document.createElement('div');
    mbody.className = 'msg_body';

    var mfoot = document.createElement('div');
    mfoot.className = 'msg_footer';

    var mheadall = mhead.appendChild(mx);

    mbox.appendChild(mhead).appendChild(mx);
    mbox.appendChild(mbody);
    mbox.appendChild(mfoot);

    parent.appendChild(mbox);
    var tt = $(this).text();


    var dd = $(this).attr("id");

    $("#bb").text(tt);

    $("#bb").attr("id", dd);


});

fiddle link