JSFiddle - React, Tailwind, and code Playground

HTML

<p id="message">Click a square</p>

        <ul class="gameBoard">
          <ul class="rowOne">
            <input type="button" id= "buttonOne" class= "gameBoardSquare" value=""><!--
            --><input type="button" id="buttonTwo" class= "gameBoardSquare" value=""><!--
            --><input type="button" id="buttonThree" class= "gameBoardSquare" value="">
          </ul>
          <ul class="rowTwo">
            <input type="button" id="buttonFour" class= "gameBoardSquare" value=""><!--
            --><input type="button" id="buttonFive" class= "gameBoardSquare" value=""><!--
            --><input type="button" id="buttonSix" class= "gameBoardSquare" value="">
          </ul>
          <ul class="rowThree">
            <input type="button" id="buttonSeven" class= "gameBoardSquare" value=""><!--
            --><input type="button" id="buttonEight" class= "gameBoardSquare" value=""><!--
            --><input type="button" id="buttonNine" class= "gameBoardSquare "value="">
          </ul>
        </ul>

        <div>
            <input type="button" id="buttonReset" value="RESET">
        </div>

JavaScript

document.getElementById("buttonTwo").value = "test";