JSFiddle - React, Tailwind, and code Playground

HTML

<select id="my_SiteUsers" style="width:200px;" onchange="RefreshGroupLists()">
      	<option value='default' disabled="disabled">Select a user</option>
      </select>

JavaScript

var user, userValue, userText, group, strHTMLSiteUsers, strHTMLSiteGroups, strHTMLAvailable, strHTMLAssigned, arrOptionsAssigned, arrGroups, arrUsers, intOpts, booMatch, booErr;

$(document).ready(function(){ 
    user = $('#my_SiteUsers');
    userValue = $('#my_SiteUsers').find(':selected').val();
    userText = $('#my_SiteUsers').find(':selected').text();
    group = $('#my_SiteGroups');
    groupsAssigned = $("#my_SPGroupsAssigned").html("");
    groupAvailable = $("#my_SPGroupsAvailable").html("");
    userAssigned = $("#my_SPUsersAssigned").html("");
    userAvailable = $("#my_SPUsersAvailable").html("");

    $("button").click(function() { return false; });
    
    populateUsers();
    populateGroups();
});

function RefreshGroupLists(){
  strHTMLAvailable = "";
  strHTMLAssigned = "";
  arrOptionsAssigned = new Array();
  intOpts = 0;
  booMatch;
  booErr = "false";

  groupsAssigned.html("");
  groupAvailable.html("");

  if(user.attr("value") == 0){
    alert("You must select a user");
    return;
  }

	//Populate the Groups Assigned
  $().SPServices({
      operation: "GetGroupCollectionFromUser",
      userLoginName: userValue,
      async: true,
      completefunc: function(xData, Status) {
        $(xData.responseXML).find("errorstring").each(function() {
	      alert("User not found");
	      booErr = "true";
	      return;
        });
        $(xData.responseXML).find("Group").each(function() {
          strHTMLAvailable += "<option value='" + $(this).attr("Name") + "'>" + $(this).attr("Name") + "</option>";
          arrOptionsAssigned[intOpts] = $(this).attr("Name");
          intOpts = intOpts + 1;
        });
        groupsAssigned.append(strHTMLAvailable);
      }
  });

  //Populate available site groups
  if(booErr == "false"){
    $().SPServices({
        operation: "GetGroupCollectionFromSite",
        async: true,
        completefunc: function(xData, Status) {
          $(xData.responseXML).find("Group").each(function() {
           ...