JSFiddle - React, Tailwind, and code Playground

HTML

<select id='fruits' > 
 <option value=1 >mango</option>
 <option value=2 >apple</option>
 <option value=2 >apple</option>
 <option value=3 >grapes</option>
 <option value=1 >mango</option>
 <option value=3 >grapes</option>
 <option value=4 >oranges</option>
 <option value=4 >oranges</option>
 <option value=3 >grapes</option>
 <option value=3 >grapes</option>
 <option value=3 >oranges</option>
 <option value=3 >grapes</option>
 <option value=3 >grapes</option>
 <option value=3 >grapes</option>
 <option value=3 >grapes</option>
 <option value=4 >oranges</option>
 <option value=4 >oranges</option>
 <option value=2 >apple</option>
    
</select>

JavaScript

var x = document.getElementById("fruits");
    var getfruits = []; // where all fruits will store
    var i;
    for (i = 0; i < x.length; i++) {
        x.options[i].text;
        var y = x.options[i].text;
        getfruits.push(y); // push all fruits into an array
    }

    var newfruits = []; // where filtered fruits will store
    $.each(getfruits, function (i, el) {
        if ($.inArray(el, newfruits) === -1) newfruits.push(el); // filter fruits
    });
    console.log(newfruits)
    
    for (i = 0; i < newfruits.length; i++) {
        $(document.body).append("<input type='text' value='"+newfruits[i]+"' >"); // append textbox
    }