J'affiche une structure de navigation générée dynamiquement. Chaque emplacement possède un type de magasin généré à partir des magasins de cet emplacement.

Je dois supprimer les doublons pour chaque emplacement afin que les courses puissent apparaître dans les deux emplacements. J'ai essayé la solution jquery courante ci-dessous qui supprime les doublons, mais chaque type de magasin n'apparaît qu'à un seul emplacement.

var seen = {};
$("ul#storetypes").find("li").each(function(index, html_obj) {
  txt = $(this).text().toLowerCase();

  if (seen[txt]) {
    $(this).remove();
  } else {
    seen[txt] = true;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li>Location 1
    <ul id="storetypes" class="sub-menu">
      <li>groceries</li>
      <li>cakes</li>
      <li>motor spares</li>
      <li>groceries</li>
    </ul>
  </li>
  <li>Location 2
    <ul class="sub-menu">
      <li>groceries</li>
      <li>motor spares</li>
      <li>motor spares</li>
      <li>groceries</li>
    </ul>
  </li>
</ul>