JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" class="addEdit">
    <label for="genre_1">Genre 1:</label>
    <select name="genre_1" id="genre_1" class="chosenGenreData">
        <option value=""></option>
        <option value="Action">Action</option>
        <option value="Adventure">Adventure</option>
        <option value="Biography">Biography</option>
    </select>
    <br><label for="genre_2">Genre 2:</label>
    <select name="genre_2" id="genre_2" class="chosenGenreData">
        <option value=""></option>
        <option value="Action">Action</option>
        <option value="Adventure">Adventure</option>
        <option value="Biography">Biography</option>
    </select>
    <br><label for="genre_3">Genre 3:</label>
    <select name="genre_3" id="genre_3" class="chosenGenreData">
        <option value=""></option>
        <option value="Action">Action</option>
        <option value="Adventure">Adventure</option>
        <option value="Biography">Biography</option>
    </select>
</form>

JavaScript

function resetOptions(){
    $(".chosenGenreData").each(function(){
        $(this).children("option").show();
    });
}
$('.chosenGenreData').change(function() {
    resetOptions();
    $(".chosenGenreData").each(function(){
        var selectedVal = $(this).val();
        var attrID = $(this).prop("id");
        $(".chosenGenreData").each(function(){
            if($(this).prop("id") != attrID){
                if(selectedVal != ""){
                    $(this).children("option[value="+selectedVal+"]").hide();
                }
            }
        });
    });
});