JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<table align="center">
  <tr>
    <td colspan="3" style="text-align:center">
      <font style="font-weight:bold">Select a User:&nbsp;&nbsp;&nbsp;</font>
      <select id="my_SiteUsers" style="width:200px;" onchange="RefreshGroupLists()">
      	<option value='default' disabled="disabled">Select a user</option>
      </select>
      <button id="removeUser" style="width:40px;" onclick="removeUserFromSite()">&#10006;</button>
    </td>
  </tr>
  <tr>
    <th class='ms-vh2'>Available Groups</th>
    <th></th>
    <th class='ms-vh2'>Assigned Groups</th>
  </tr>
  <tr>
    <td class='ms-vb2'>
      <select id="my_SPGroupsAvailable" style="width:150px;height:150px;" multiple="multiple"></select>
    </td>
    <td>
      <button id="my_AddGroupsToUser" style="width:40px;" onclick="AddGroupsToUser()">&gt;&gt;</button><br><br>
      <button id="my_RemoveGroupsFromUser" style="width:40px;" onclick="RemoveGroupsFromUser()">&lt;&lt;</button></td>
    <td class='ms-vb2'>
      <select id="my_SPGroupsAssigned" style="width:150px;height:150px;" multiple="multiple"></select>
    </td>
  </tr>
</table>
<table align="center">
  <tr>
    <td colspan="3" style="text-align:center">
      <font style="font-weight:bold">Select a Group:&nbsp;&nbsp;&nbsp;</font>
      <select id="my_SiteGroups" style="width:200px;" onchange="RefreshUserLists()">
        <option value='default' disabled="disabled">Select a group</option>
      </select>
      <button id="removeGroup" style="width:40px;" onclick="removeGroupFromSite()">&#10006;</button>
    </td>
  </tr>
  <tr>
    <th class='ms-vh2'>Available Users</th>
    <th></th>
    <th class='ms-vh2'>Current Users</th>
  </tr>
  <tr>
    <td class='ms-vb2'>
      <select id="my_SPUsersAvailable" style="width:150px;height:150px;" multiple="multiple"></select>
    </td>
    <td>
      <button id="my_AddUserToGroup" style="width:40px;" onclick="AddUserToGroup()">&gt;&gt;</button><br><br>
      <button id="my_RemoveUserFromGroup"...

JavaScript

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

$(document).ready(function(){ 
    user = $('#my_SiteUsers');
    group = $('#my_SiteGroups');
    groupsAssigned = $("#my_SPGroupsAssigned");
    groupAvailable = $("#my_SPGroupsAvailable");
    userAssigned = $("#my_SPUsersAssigned").html("");
    userAvailable = $("#my_SPUsersAvailable").html("");

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

function populate() {
  //Populate the user list
  strHTMLSiteUsers = "";
  $().SPServices({
      operation: "GetUserCollectionFromSite",
      async: true,
      completefunc: function(xData, Status) {
        $(xData.responseXML).find("User").each(function() {
          strHTMLSiteUsers += "<option value='" + $(this).attr("LoginName") + "'>" + $(this).attr("Name") + "</option>";
        });
        user.append(strHTMLSiteUsers);
      }
  });

  if (user.val() == "default"){
    //don't do anything
  }else{
    //if a user is selected, run 
    RefreshGroupLists();
  }

  //Populate the group list  
  strHTMLSiteGroups = "";
  $().SPServices({
      operation: "GetGroupCollectionFromSite",
      async: true,
      completefunc: function(xData, Status) {
        $(xData.responseXML).find("Group").each(function() {
        strHTMLSiteGroups += "<option value='" + $(this).attr("Name") + "'>" + $(this).attr("Name") + "</option>";          
        });
        group.append(strHTMLSiteGroups);
      }
  });
  if (group.val()=="default"){
    //don't do anything
  }else{
    //if a user is selected, run 
  RefreshUserLists();
  } 
}

//1. Managing groups a user belongs to
function RefreshGroupLists(){
  strHTMLAvailable = "";
  strHTMLAssigned = "";
  arrOptionsAssigned = new Array();
  intOpts = 0;
  booMatch;
  booErr = "false";

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

  if(user.attr("value") == 0){
    alert("You must...