Как добавить 2 деления каждые 10 секунд?

Question

Я пытался использовать setInterval, чтобы показывать интервал каждые 10 секунд, но, похоже, он не действует.В настоящее время диапазон непрерывно отображается даже без 10 секунд.Как это исправить?

var i = 0;
var messages = {from: {type: "Other"}};
var myInterval = setInterval(function() {
  if (i === 2) return clearInterval(myInterval);
  if (messages.from.type === "Other") {
    $('.chat_converse').append("<span class='msg_item'>lorem ipsum</p></span>");
  }

  $('.chat_converse').append("<span class='msg_item2'>textextext</p></span>");
  i++;
}, 10000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_converse"></div>

Чего мне следует ожидать, так это отображать 2 интервала каждые 10 секунд и отображать дополнительные добавления после каждого 2 интервала.

Ожидаемый результат:

<div class="chat_converse">
  <span class="msg_item">lorem ipsum</span>
  <span class="msg_item">lorem ipsum</span>
  <span class="msg_item2">textextext

  </span><span class="msg_item">lorem ipsum</span>
  <span class="msg_item">lorem ipsum</span>
  <span class="msg_item2">textextext</span>
 </div>