Как сохранить 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 ;

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

код был основан на этом туториале
https://webformyself.com/sozdanie-klejkix-zametok-...
Я перенес код на codepen для лучшего понимания вопроса (3 лишних копий на локальном сайте отсутствуют)
https://codepen.io/zeni-agentt/pen/gZdvJN