Печатать текст с эффектом пишущей машинки, очищать после каждого предложения в цикле

Я пытаюсь добиться эффекта пишущей машинки с моим текстом, где каждое предложение (теги h1) печатается, затем текст очищается и печатается второе предложение. Как только второе или третье предложение будет напечатано, оно должно очиститься и снова начать печатать первое предложение в цикле.

Я не могу очистить первое предложение, весь текст просто складывается, а также слово «the» не появляется.

Есть идеи, как действовать? Я хотел бы сохранить текст в HTML, чтобы я мог повторно использовать скрипт на разных страницах.

Ссылка JSFiddle: https://jsfiddle.net/b33uhLL2/

HTML:

<div id = "typewriter">
  <h1>This<br> is<br> the<br>first<br><span class = "highlight">sentence</span></h1>
  <h1>This<br> is<br> the<br>second<br>sentence</h1>
</div>

JS:

function setupTypewriter(t) {
  var HTML = t.innerHTML;

  t.innerHTML = "";

  var cursorPosition = 0,
    tag = "",
    writingTag = false,
    tagOpen = false,
    typeSpeed = 200,
    tempTypeSpeed = 0;

  var type = function() {

    if (writingTag === true) {
      tag += HTML[cursorPosition];
    }

    if (HTML[cursorPosition] === "<") {
      tempTypeSpeed = 0;
      if (tagOpen) {
        tagOpen = false;
        writingTag = true;
      } else {
        tag = "";
        tagOpen = true;
        writingTag = true;
        tag += HTML[cursorPosition];
      }
    }
    if (!writingTag && tagOpen) {
      tag.innerHTML += HTML[cursorPosition];
    }
    if (!writingTag && !tagOpen) {
      if (HTML[cursorPosition] === " ") {
        tempTypeSpeed = 0;
      } else {
        tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      }
      t.innerHTML += HTML[cursorPosition];
    }
    if (writingTag === true && HTML[cursorPosition] === ">") {
      tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      writingTag = false;
      if (tagOpen) {
        var newSpan = document.createElement("span");
        t.appendChild(newSpan);
        newSpan.innerHTML = tag;
        tag = newSpan.firstChild;
      }
    }

    cursorPosition += 1;
    if (cursorPosition < HTML.length - 1) {
      setTimeout(type, tempTypeSpeed);
    }

  };

  return {
    type: type
  };
}


var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();

CSS:

h1 {
  font-family: helvetica;
  font-size: 20px;
}