JSFiddle - React, Tailwind, and code Playground

HTML

<select id="sel1">
    <option value="all">ALL</option>
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>


<select id="sel2">
    <option data-val="1">Banana</option>
    <option data-val="1">Apple</option>
    <option data-val="1">Orange</option>
    <option data-val="2">Wolf</option>
    <option data-val="2">Fox</option>
    <option data-val="2">Bear</option>
    <option data-val="3">Eagle</option>
    <option data-val="3">Hawk</option>
    <option data-val="4">BMW</option>
</select>

<div class="cloned" style="margin-top: 2em;">
    <p>The data object in cache.</p>    
</div>

JavaScript

var select = $('#sel2'),
    cache = $('#sel2').clone();
$('.cloned').append(cache);
$("#sel1").change(function() { 
	var id = $(this).val(),
        options = [];
	select.empty();
    cache.find('option').each(function () {
        if (id === 'all') {
            select.append($(this).clone());
        } else if ($(this).data('val') == id) {
            select.append($(this).clone());
        }
    });
});