PHP - PDO - JQuery dynamic select element only allows the first option to be selected

For certain reasons (towards a larger picture), I have a select element that is populated by a php page. The data is populated properly within the element. However, when I make a selection the element always forces the first item in the list. If I "append" the returned data, I can select different items but if clicked again it will just keep appending on top of the existing items. If I "empty" before the "append" it shows the correct list but still forces the first item in the list and this happens whether I use onclick or onchange. Whatever code works will also need to be applied the same to this element being dynamically created on the same page later. As I understand it the $(document).on('click'... as opposed to $(document).click(... works better for dynamic elements. Any help is appreciated. Thanks, I am still new to this exchange and I hope I described my problem correctly. I have searched for hours about this problem, but I mostly get results about multiple select elements or populating a second select, and even potential answers I have tried do not work.

My data is pulled from _get_staffnames.php, and lets say it shows Frank, George, Todd.

    $stmt = $myPDO->prepare( "SELECT userID, CONCAT(firstname,' ', lastname) AS Fullname FROM tbl_user ORDER BY Fullname ASC" );
    $stmt->execute();
    $results = $stmt->fetchAll();   

    foreach ($results as $row): 
        echo '<option value="' . $row['userID'] . '">' . $row['Fullname'] . '</option>';
    endforeach
Copy code

My HTML is:

    <select name="userID1" id="userID1" class="namesClass" required>
        <option selected value="">Select Staff</option>
    </select>
Copy code

One JQuery way I tried, specifically for the one element id "userID1", populates Frank, George, Todd...but when I pull down and click Todd, it still shows Frank (first in list) after the click.

    $("#userID1").click(function() {
        $("#userID1").load("_get_staffnames.php");
    });
Copy code

More towards the dynamic way I am going. This code allows me to choose Frank, George, or Todd and keeps the selection, but if I click on that given dynamic element again, the list keeps repeating the group +1 every time I click on it.

    $(document).on('click', '.namesClass', function(e) { 
        var select_id = $(this).attr("name");
        $.ajax({
            type: "POST",
            url: '_get_staffnames.php',
            })
            .done(function (returndata) {
                $('#' + select_id).append(returndata);
            })
    });
Copy code

When I try the .empty parameter before append as below, I get the correctly populated list (without multiple appended groups) but when I choose any item it always defaults to the first item in the list (Frank) again.

    $(document).on('click', '.namesClass', function(e) { 
        var select_id = $(this).attr("name");
        $.ajax({
            type: "POST",
            url: '_get_staffnames.php',
            })
            .done(function (returndata) {
                $('#' + select_id).empty().append(returndata);
            })
    });
Copy code