JQuery insertBefore () дублирующая вставка

Question

У меня есть следующая разметка:

<div class="mobile-menu">
  <ul>

    <li class="product">
      Link
      <ul>

        <li>Link</li>
        <li>Link</li>

        <li class="item-has-children">
          Link has submenu
          <ul>
            <li>submenu link</li>
            <li>submenu link</li>
          </ul>
        </li>
      </ul>
    </li>

  </ul>
</div>

То, что я пытаюсь сделать, это переместить подменю (li.item-has-children) как первый li элемент в .product. Итак, моя разметка выглядит так:

<div class="mobile-menu">
  <ul>

    <li class="product">
      Link
      <ul>

        <li class="item-has-children">
          Link has submenu
          <ul>
            <li>submenu link</li>
            <li>submenu link</li>
          </ul>
        </li>

        <li>Link</li>
        <li>Link</li>

      </ul>
    </li>

  </ul>
</div>

Мне удалось переместить элемент li наверх, но он дублируется. Как и в моей отрисованной разметке с моим JQuery ниже, это выглядит примерно так:

<div class="mobile-menu">
  <ul>

    <li class="product">
      Link
      <ul>

        <li>
          Link has submenu

          <ul>
            <li>submenu link</li>
            <li>submenu link</li>
            <li>
              <ul>
                <li>Link has submenu</li>
                <li>
                  <ul>
                    <li>submenu link</li>
                    <li>submenu link</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>

        </li>

      </ul>
    </li>
  </ul>
</div>

Подменю в основном дублируют друг друга, и я думаю, что это связано с тем, как я использую insertBefore(). Я думаю, что он также нацелен на вложенные элементы li:

 $('.mobile-menu ul li.product ul li.item-has-children').insertBefore($('.mobile-menu ul > li.product ul:first-of-type li:first-child'));

Я просто хочу переместить li.item-has-children как первый элемент в li.product ul