I have a shortcode from functions, which retrieves a list of all users from active role. I have managed to get the list into the dropdown list with a little trickery if I wrap a div around the users and name it userdiv.

The problem is that no matter how I try to get the users into the list, they either show up as one choice (all users) or all the letters show up as a separate choice.

I have this in functions:

function userLooping($role)
{
$user_query = new WP_User_Query( array( 'role' => $role ) );

// User Loop
if ( !empty( $user_query->results ) ):
        echo '<div id="userdiv">';
    foreach ( $user_query->results as $user ):
        echo '"';
        echo $user->display_name; // display user name
        echo '",';  
    endforeach;
        echo '</div>';
endif;
}
add_shortcode( 'users_role', 'userLooping' );

I have put in [users_role] to fetch the users to the page (may not need this).
The dropdown has ID input_5_13

Script to get the users to the dropdown:

       <script>
            
            var select = document.getElementById("input_5_13"),
                     arr = [document.getElementById("userdiv").innerHTML];
             
             for(var i = 0; i < arr.length; i++)
             {
                 var option = document.createElement("OPTION"),
                     txt = document.createTextNode(arr[i]);
                 option.appendChild(txt);
                 option.setAttribute("value",arr[i]);
                 select.insertBefore(option,select.lastChild);
             }
             
        </script>

When the script collects the text from userdiv, it ends up as an option. A long line. If I remove [ ] from the script, all letters are fetched as an alternative.

Tried adding " before each user and "," after, but I can't get it to work.

If I enter it manually in the script, it works. Then each user is added as a choice.

var select = document.getElementById("input_5_13"),
                      arr = ["user1","user2","user3"];

What am I doing wrong?