JSFiddle - React, Tailwind, and code Playground

HTML

<ul contenteditable>
	<li></li>
    </ul>
<div style="height: 1px;"></div>
<span></span>

<br>
<ul contenteditable>
	<li></li>
    </ul>
<div style="height: 1px;"></div>
<span></span>

JavaScript

var ul = document.getElementsByTagName('ul')[0];
var li = document.getElementsByTagName('li');

var lastClicked = document.getElementsByTagName('li')[0];
document.getElementsByTagName('li')[0].addEventListener('click', function() {
        lastClicked = this;
    }, false);
ul.addEventListener('keydown', function(e) {
    var BACKSPACE = 8, ENTER = 13;
   if ( e.keyCode == ENTER ) {
        var newEl = document.createElement('li');
       newEl.addEventListener('click', function() {
        lastClicked = this;
    }, false);
        var range = document.createRange();
        var sel = window.getSelection();
        this.insertBefore(newEl, lastClicked.nextSibling);
        range.setStart(newEl, 0);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        e.preventDefault();
           return false;
    }
    if ( this.getElementsByTagName('li').length === 1 ) {
        this.contentEditable = 'false';
        this.getElementsByTagName('li')[0].contentEditable = 'true';
   } else {
        this.contentEditable = 'true';
        this.getElementsByTagName('li')[0].contentEditable = '';
   }
    document.getElementsByTagName('span')[0].innerHTML = document.getElementsByTagName('li').length;
}, false);

document.getElementsByTagName('span')[0].innerHTML = document.getElementsByTagName('li').length;