JSFiddle - React, Tailwind, and code Playground

HTML

<select class="ouija">
    <option>one</option>
    <option value="donkey">two</option>
    <option selected="selected">maybe three</option>
    <option>and four</option>
</select>
<br><br>
<button id="ouijify">summon spirits</button>
<button id="showcombo">show combo</button>

SCSS

body { margin: 1em; }
ul.ouijaBoard {
    
    position: relative;
    
    .planchette {
        position: absolute;
        border: 5px solid #efefef;
        border-radius: 5px;
    }

    li {
        display: inline-block;
        padding-top: 5px;
        margin-right: 12px;
        cursor: pointer;
    }
}

CoffeeScript

$.fn.ouija = ->
    self = this
    @hide()
    @after $list = $("<ul />").addClass "ouijaBoard"

    selected = 0
    $("option", this).each (index) ->
        $option = $ this
        
        if $option.is ":selected"
            selected = index
            
        $list.append $("<li />")
            .text($option.text())
            .on click: -> 
                self.val $option.prop "value"
                console.log self.val()
                $li = $ this
                $planchette.animate {
                    top: $li.position().top 
                    left: $li.position().left - 10
                    width: $li.width() + 10
                    height: $li.height()
                }, 200

    $list.append $planchette = $("<div />")
        .addClass("planchette")
        .css(height: $list.height())        

    $("li").eq(selected).click()
    
$ -> 
    $("#ouijify").on click: -> 
        $(".ouija").ouija()
        $(this).remove()
        
    $("#showcombo").on click: -> $(".ouija").show()