JSFiddle - React, Tailwind, and code Playground

HTML

<select name="type[]" style="display: none;">
    <optgroup>
        <option value="none">Select</option>
    </optgroup>
    <optgroup label="First Group">
        <option value="1">One</option>
        <option value="2">Two</option>
    </optgroup>
    <optgroup label="Second Group">
        <option value="10">Ten</option>
        <option value="20">Twenty</option>
    </optgroup>
</select>

<div class="newListSelected">
    <div class="selectedTxt">20</div>
    <ul class="newList">
        <!-- Other stuff here -->
    </ul>
</div>

JavaScript

var selected = 0;
var options = 0;

$('.newListSelected').each(function() {
    

    selected = $(this).children('.selectedTxt');
    selected = selected.text();

    /* Everything before this line works completely fine */

    options = $(this).prev();
    console.log(options);
    console.log('Original Value: ' + options.val());

    options.find('option[value=' + selected + ']').attr('selected', 'selected');
    
    console.log('New Value: ' + options.val());

}).remove();