Value of Select with Options appended using jQuery is returning as blank string

Question

I have a selection in my form:

    <div class="input-field" id="users-select-div">

    <form id="users_load" action="/loadusergroup">

        <select id="usersgroup">
            <option value="" disabled selected>Choose a connection</option>
        </select>
        <button type="submit" class="waves-effect waves-light btn">Find All</button>

    </form>
    </div>

And then generate the other options using jQuery:

            $("#users-select-div select").html(`
                <option value="" disabled selected>Choose a user</option>
                {% for user in users %}
                <option value='{{ user.uuid }}'>{{ user.name }} - {{ connection.map_name }}</option>
                {% endfor %}
                `
            )

Then get this form with jQuery:

    $("#users_load").submit(function(event){
        event.preventDefault();
        submit_to_modal(
            {
                'user_uuid':  $("#usersgroup").val(),
            },
            $(this).attr('action'),
            'put'
        )
    })

I already tried a few tricks:

1. Using a hidden input element then assigning the select value to it, then getting that input value via it's id.
2. Trying out outer level id names e.g (#users-select-div select)

But I'm getting an empty string still. I'm not getting any errors, I already tried tracing but I can't find anything odd the way I'm getting the value