JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">
function addChildElements()
{
var newdiv=document.createElement("li");
var newtext=document.createTextNode("test");
newdiv.appendChild(newtext); 
document.getElementById("scribble").appendChild(newdiv); 
alert(newdiv);
}
</script>

<script>
  function storeUserScribble(id) {
    var scribble = document.getElementById('scribble').children;
    localStorage.setItem('userScribble',scribble);
  }

  function getUserScribble() {
    if ( localStorage.getItem('userScribble')) {
      var scribble = localStorage.getItem('userScribble');
    }
    else {
      var newdiv=document.createElement("li");
      var newtext=document.createTextNode("test");
      newdiv.appendChild(newtext); 
      document.getElementById("scribble").appendChild(newdiv);
      alert(newdiv);
    }
    document.getElementById('scribble').children = scribble;
   
  }

  function clearLocal() {
    clear: localStorage.clear(); 
    return false;
  }
</script>

</head>

<body>

<ol id="scribble" contenteditable="false" onclick="storeUserScribble(this.id);">

</ol>

<input type="button" value="Add Child Element" onclick="addChildElements(); storeUserScribble(document.getElementById('scribble').id);"/>

</body>
</html>

JavaScript

var $navItems = $('.nav li'),
    $itemControlItems = $('#item-control li');
$.each($navItems, function(index, el) {
    $($itemControlItems[index]).data('icon', $(el).data('icon'));
});