JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="product-grid">
    <li data-producttype="foo">product</li>
    <li data-producttype="bar">product</li>
    <li data-producttype="foo">product</li>
    <li data-producttype="foo">product</li>
    <li data-producttype="foo">product</li>
    <li data-producttype="bar">product</li>
</ul>

<select class="product-types">
    
</select>

JavaScript

var products = $.unique($('.product-grid li').map(function(item, index){
   return $(this).attr('data-producttype');
 }));

var productsHtml = "";
$.each(products, function(index, item){
    productsHtml += "<option>" + item + "</option>";
});



$("select.product-types").html(productsHtml);