JSFiddle - React, Tailwind, and code Playground

HTML

<div class="setup">
</div>
<div class="setup-player">
                <div class="setup-wizard-appearance">
                    <div class="setup-wizard-wrap">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 86" class="setup-wizard">
                            <g class="wizard">
                                <use xlink:href="#wizard-coat" class="wizard-coat" style="fill: #6589a4"></use>
                                <use xlink:href="#wizard-head" class="wizard-head"></use>
                                <use xlink:href="#wizard-eyes" class="wizard-eyes"></use>
                                <use xlink:href="#wizard-hands" class="wizard-hands"></use>
                            </g>
                        </svg>
                    </div>
                    <input type="hidden" name="coat-color" value="rgb(101, 137, 164)">
                    <input type="hidden" name="eyes-color" value="black">
                </div>
                </div>

JavaScript

var coatColor = [
  'rgb(101, 137, 164)',
  'rgb(241, 43, 107)',
  'rgb(146, 100, 161)',
  'rgb(56, 159, 117)',
  'rgb(215, 210, 55)',
  'rgb(0, 0, 0)'
];

// Function for acquiring a random element from an array
var getRandomElement = function (arr) {
  var randomElement = Math.floor(Math.random() * arr.length);
  return randomElement;
};

var changeAppearance = userSetting.querySelector('.setup-player');
var wizardCoat = changeAppearance.querySelector('.setup-wizard .wizard-coat');
var changeCoat = function (arr) {
  wizardCoat.style.fill = getRandomElement(arr);
}
wizardCoat.addEventListener('click', changeCoat(coatColor));