title: Dynamically add array elements to select options without duplicates
body: <p>I have this drop-down menu. My goal is to transfer the elements of an array as choices on the drop-down menu. However, I want repeating array elements to be copied to the drop-down only once. I'm looking for transferring my array to another array without repetition. So, I can rather use that new array to transfer its element to the drop-down menu. For example, on the drop-down menu, the &quot;kg&quot; and &quot;lbs&quot; would only exist once instead of twice.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>amountType = document.getElementById("amount-type");
  
  arr = ["kg", "medium", "lbs", "liter", "kg", "small", "lbs"];
  
  for (let i = 0; i &lt; arr.length; i++) {
    let el = document.createElement("option");
    el.textContent = arr[i];
    el.value = arr[i];
    
    amountType.appendChild(el);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="amount-type"&gt;&lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>