Jquery ui Resizable handle not working in append element function

Question

I'm using jQuery UI Resizable, and I will use custom handles. To do that, I follow this answer but I get same problem like this, so I try their answer but still not working. Can someone help to make this working? This is my fiddle problem https://jsfiddle.net/suiko/155zzw2p/3/

$(document).on({mouseenter: function (e) {
    var elmnt_col = $(this);
    $(elmnt_col).append("<div class='overlay' id='overlay-column'><div class='overlay-menu-action' id='overlay-menu-column'><div class='overlay-label' id='overlay-label-column'>Column</div></div></div>");

    $(elmnt_col).find('#overlay-column').append("<div class='resize-handle ui-resizable-handle ui-resizable-e' id='right-resize-handle'></div>");
    $(elmnt_col).resizable({
        handles: {
            e: '#right-resize-handle'
        }
    });
}, mouseleave: function (e) {
        $("#overlay-column").remove();
    }}, ".custom-column");