JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<select name="title" id="title">
    <option selected="" disabled="">Categories</option>
    <option value="photo-galleries">Photo Galleries</option>
    <option value="photography">photography</option>
    <option value="romeo-juliet">Romeo &amp; Juliet</option>
    <option value="swan-lake">Swan Lake</option>
    <option value="symmetries">Symmetries</option>
</select>

<select name="day" id="day">
    <option selected="" disabled="">Day of the week</option>
    <option value="monday">Monday</option>
    <option value="tuesday">Tuesday</option>
    <option value="wednesday">Wednesday</option>
    <option value="thursday">Thursday</option>
    <option value="friday">Friday</option>
    <option value="saturday">Saturday</option>
    <option value="sunday">Sunday</option>
</select>

CSS

* {
  font-family: arial;
}

select {
  text-transform: uppercase;
}

JavaScript

/**
 * Here is a working jQuery version, which I am trying to replicate in vanilla JS
 * https://jsfiddle.net/3fbhu4am/2/
 */	


function forEachElement(selector, fn) {
    var elements = document.querySelectorAll(selector);
    for (var i = 0; i < elements.length; i++)
    fn(elements[i], i);
}     

forEachElement('select', function(el, i){
    // Capitalise this element
    el.style.textTransform = 'capitalize';

    // When options are changed
    el.addEventListener('input', function(){
        // Get selected option
        var selected = el.options[el.selectedIndex],
        // Get text of selected option
        selectedText = selected.text;

        // Make it uppercase
        selectedText = selectedText.toUpperCase();

        // Change the text of the selected option
        selected.innerText = selectedText;

    });
    
    // Then, trigger 'change' of dropdown to make initial option, uppercase
});