Как сохранить html код в мета поле поста?

У меня есть вот такой код

    <div id="hint-add"></div>
    <div id="hint-container"></div>

    <article>
    <img  onclick="Note.toggle();"  src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg">
    </article>



    var STICKIES = (function () {
    var initStickies = function initStickies() {
        $("<div />", { 
            text : "+",  
            "class" : "add-sticky",
            click : function () { createSticky(); }
        }).prependTo(document.getElementById( 'hint-add')); 
        initStickies = null;
    },
    openStickies = function openStickies() {
        initStickies && initStickies();
        for (var i = 0; i < localStorage.length; i++) {
            createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
    },
    createSticky = function createSticky(data) {
        data = data || { id : +new Date(), top : "40px", left : "40px", text : "Note Here" }  
        return $("<div />", { 
            "class" : "sticky",
            'id' : data.id
             })
            .prepend($("<div />", { "class" : "sticky-header"} )
                .append($("<span />", { 
                    "class" : "sticky-status", 
                    click : saveSticky 
                }))
                .append($("<span />", { 
                    "class" : "close-sticky", 
                    text : "Х", 
                    click : function () { deleteSticky($(this).parents(".sticky").attr("id")); }
                }))
            )
            .append($("<textarea />", { 
                html : data.text, 
                contentEditable : true, 
                "class" : "sticky-content", 
                keypress : markUnsaved
            }))
        .draggable({ 
            handle : "div.sticky-header", 
            stack : ".sticky",
            start : markUnsaved,
            stop  : saveSticky  
         })
        .css({
            position: "absolute",
            "top" : data.top,
            "left": data.left
        })
        .focusout(saveSticky)
        .appendTo(document.getElementById( 'hint-container'));
    },
    deleteSticky = function deleteSticky(id) {
        localStorage.removeItem("sticky-" + id);
        $("#" + id).fadeOut(200, function () { $(this).remove(); });
    },
    saveSticky = function saveSticky() {
        var that = $(this),  sticky = (that.hasClass("sticky-status") || that.hasClass("sticky-content")) ? that.parents('div.sticky'): that,
                obj = {
                    id  : sticky.attr("id"),
                    top : sticky.css("top"),
                    left: sticky.css("left"),
                    text: sticky.children(".sticky-content").html()             }
        localStorage.setItem("sticky-" + obj.id, JSON.stringify(obj));  
        sticky.find(".sticky-status").text("saved");
    },
    markUnsaved = function markUnsaved() {
        var that = $(this), sticky = that.hasClass("sticky-content") ? that.parents("div.sticky") : that;
        sticky.find(".sticky-status").text("unsaved");
    }
    return {
        open   : openStickies,
        init   : initStickies,
        "new"  : createSticky,
        remove : deleteSticky 
    };
}());
STICKIES.open();

И мне необходимо сохранить все: текст, размер и местоположение в мета поле поста.

<form method="POST">
        <input type="submit" value="+1" name="div_post">
</form>
if ($_POST['div_post']){
    $number_div = get_post_meta(get_the_ID(), 'number_div ', true);
    $number_div = '<div id="hint-container"></div>';
    update_post_meta(get_the_ID(), 'number_div ', $number_views_ise);
}
$number_div = get_post_meta(get_the_ID(), 'number_div ', true);
echo $number_div ;

Но я не знаю, как мне лучше это сделать. Есть ли у кого идеи?

Код был основан на этом туториале. Я перенес код на codepen для лучшего понимания вопроса (3 лишних копии на локальном сайте отсутствуют)