JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <div id="upload_flex_row">
        <label for="story_by">Story By:</label>
        <select id="story_by" name="story_by" size="10" multiple>
            <option value=""></option>
            <option value="my_username">Me</option>
            <option value="partner_no1">Partner One</option>
            <option value="partner_no2">Partner Two</option>
            <option value="partner_no3">Partner Three</option>
            <option value="partner_no4">Partner Four</option>
            <option value="partner_no5">Partner Five</option>
        </select>
        <span class="add_writer_span">
            <input type="text" name="add_story_by" class="add_story_by">
            <input type="submit" class="add_story_button" name="add" value="Add"/>
        </span>
    </div>
   </html>

JavaScript

window.onload = function() {
const selectStoryBy = document.querySelector("select#story_by");
const selectStoryByOptions = selectStoryBy.options;
const addStoryByInput = document.querySelector(".add_story_by");
const addStoryByButton = document.querySelector(".add_story_button");

   addStoryByButton.addEventListener("click", function(e){
        addStory();
        e.preventDefault();
    });
    
        function addStory() {
        let addStoryByInputText = document.querySelector(".add_story_by").value;
        let newOption = document.createElement("option");
        let isNameAvailable = true;
        if (addStoryByInputText) {
            newOption.value = selectStoryByOptions.length;
            newOption.text = addStoryByInputText;

            for (let i = 0; i < selectStoryByOptions.length - 1; i++) {
                if (selectStoryByOptions[i].text == addStoryByInputText) 
                {
                    isNameAvailable = false; break;
                } 
            }
            if (isNameAvailable == false) {}
            else { selectStoryByOptions.add(newOption);}
            
        }
    }
}