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 productTypes=[];
$('.product-grid li').each(function(){
   var thisdata = $(this).attr('data-producttype');
    if($.inArray(thisdata, productTypes) === -1){
        productTypes.push(thisdata);
        $('.product-types').append("<option value='"+thisdata+"'>" + thisdata + "</option>");
    }
   
 });