I am working on a game that allows users to select which letters they want to use for the game. Each letter is a button identical to the one below, with disabled = true.

<button id = "a" disabled = "true" style={{ fontSize: '8vh', height: '100%', width: '8%', cursor: 'pointer' }} 
     onMouseDown={function () {
          var a= "A";
          addToDisplayList(a);
     }}>
     A
</button>

Before the user can select the letters, they must click the Select Letters button which resets the array that holds the selected letters and removes the disable attribute from all the letter buttons. The code for the Select Letters button is below.

<button id = "clear" style={{ fontSize: '8vh', height: '100%', cursor: 'pointer' }}
       onMouseDown={function () {
            setToZero();
            for(var i=0; i<letterList.length; i++){
                 document.getElementById(letterList.charAt(i)).removeAttribute("disabled");
            }
}}>
Select Letters
</button>

When I click Select Letters to remove the disabled attribute from all the letter buttons, they become ungreyed out and seem to be enabled. However when I click any of the letter buttons, they do not run their onMouseDown functions.