6 Tips To Make A Select add and remove With Tailwind CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class=" mx-auto h-full flex flex-col max-w-3xl  items-center justify-center bg-white rounded-xl p-4">
        <h1 class="font-bold uppercase text-xl py-4">Permisos de Juan Cárdenas</h1>
        <form action="nombre/ruta" class="flex  flex-row justify-between space-x-4 items-center mx-auto" method="post"
            id="frmadd">
           
           <!-- Select con los permisos que no tiene el usuario -->
            <select name="perm" id="poragregar" class="p-3 h-96 border-2 border-one w-56 capitalize min-w-full min-w-max" multiple>
              <option value="1">Uno</option>
              <option value="2">Dos</option>
              <option value="3">Tres</option>
              <option value="4">Cuatro</option>
              <option value="5">Cinco</option>
            </select>
            <div class="flex flex-col">
                <!-- Mueve los seleccionados del primer select al segundo -->
                <button type="button" class="h-8" id="add">Añadir-></button>

                <!-- Mueve los seccionados del segundo select al primero -->
                <button type="button" class="h-8" id="remove">
                   <- Quitar </button>

                        <!-- Para enviar el formulario -->
                        <button form="frmadd" 
                        data-label="¿Actualizar permisos de usuario?" class="h-8 confirm mt-4 bg-black text-white px-3 py-1 rounded-lg" id="save">Guardar</button>
            </div>
             <!-- Select con los permisos que sí tiene el usuario -->
             <!-- Este es el que se envía a la ruta post en forma de array -->
                <select name="permissions[]" id="agregados" class="p-3 h-96 border-2 border-one w-56 capitalize" multiple>
               <option value="6">Seis</option>
              <option value="7">Siete</option>
              <option value="8">Ocho</option>
              <option value="9">Nueve</option>
              <option value="10">Diez</option>
            </select>
            
           
        </form>

    </div>
    <script>
        $(document).ready(function() {
            $('#add').on('click', function() {
                $('#poragregar').find('option:selected').each(function() {
                    $('#agregados').append($('<option>', {
                        value: $(this).val(),
                        text: $(this).text()
                    }));
                    $(this).remove();
                });
            })
            $('#remove').on('click', function() {
                $('#agregados').find('option:selected').each(function() {
                    $('#poragregar').append($('<option>', {
                        value: $(this).val(),
                        text: $(this).text()
                    }));
                    $(this).remove();
                });
            })

            $('#save').on('click', function() {
                /* Selecciona todos los permisos del segundo select antes de enviar el formulario */
                $('#agregados option').prop('selected', true);

                /* En el back, uso $user->synPermissionsTo($request->permissions) 
                De esa forma borra todos los permisos del usuario y le asigna sólo los que haya enviado
                por el form.
                */
           
            })

        })
    </script>

<script src="https://cdn.tailwindcss.com"></script>