How do I make a Button role for add only one role only?

I have make like this
const { SlashCommandBuilder } = require('@discordjs/builders');
const { MessageActionRow, MessageButton } = require('discord.js');

// This file is only for creating buttons only!
module.exports = {
    data: new SlashCommandBuilder()
        .setName('selfrole')
        .setDescription('Create button role (Only Harshfeudal can use)'),

        async execute(interaction) {
            const row = new MessageActionRow()
            .addComponents(
                new MessageButton()
                    .setCustomId('Pink')
                    .setLabel(': Shikimori Pink')
                    .setEmoji('<:ShikimoriPink:996998214010024036>')
                    .setStyle('SECONDARY'),
            )
            .addComponents(
                new MessageButton()
                    .setCustomId('Azure')
                    .setLabel(': Azure')
                    .setEmoji('<:Azure:997181460169633894>')
                    .setStyle('SECONDARY'),
            )

            if(interaction.user.id !== '622450109317251088') {
                return interaction.reply({ content: "Harshfeudal only!", ephemeral: true });
            }

            await interaction.reply({ 
                content: `Menu created!`, 
                ephemeral: true
            });

            await interaction.channel.send({ 
                content: `Choose your role:`,
                components: [row]
            });
        }
}

Another file:
// This file is only create for interacting with buttons only!
module.exports = {
    name: 'interactionCreate',
    async execute(interaction) {
        if (interaction.isButton()) {
            const ShikimoriPink = "996997651872628847";
            const Azure = "997181348475322418";

            const member = interaction.member;

            if (interaction.customId === 'Pink') {
                // Shikimori Pink
                interaction.guild.roles.fetch(ShikimoriPink)
                    .then(role => member.roles.add(role))
                    .catch(console.error());

                return interaction.reply({ 
                    content: `Your role will be added shortly!`, 
                    ephemeral: true });

            } else if (interaction.customId === 'Azure') {
                // Azure
                interaction.guild.roles.fetch(Azure)
                    .then(role => member.roles.add(role))
                    .catch(console.error());

                return interaction.reply({ 
                    content: `Your role will be added shortly!`, 
                    ephemeral: true 
                });
                
            };
        }
    },
};

So, if i want my member can only choose only Pink or, if they change their mind, and they press Azure color, so how do I make a button that it can add only 1 role, and check if they have another role so it will be removed and add a new role that they've selected?
Was this page helpful?