JSFiddle - React, Tailwind, and code Playground

HTML

<form id="step1">
    <p>Creator:
        <select name="creator" id="creator">
            <option>Pls select</option>
            <option name="hello" value="hello">Hello</option>
            <option name="abc" value="abc">oiasfn</option>
        </select>
    </p>
    <p>Trip Title:
        <select name="title" id="title">
            <option>Pls select</option>
        </select>
    </p>
</form>

JavaScript

$(document).ready(function () {
    $('#creator').change(function () {
        populatetitle();
    });
});

function populatetitle() {
    var firstSelect = document.getElementById("creator");
    var secondSelect = document.getElementById("title");
    if (firstSelect.options[firstSelect.selectedIndex].value === "hello") {
        var option = document.createElement("option");
        option.text = "Byebye";
        option.value = "Bye";
        secondSelect.add(option, null);

    }
    else if (firstSelect.options[firstSelect.selectedIndex].value === "abc") {
        var option = document.createElement("option");
        option.text = "Byebye2";
        option.value = "Bye1";
        secondSelect.add(option, null);

    }
}