JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "sideMenu">
    <ul>
        <li><img id="logo" src="logo-07.png" alt="logo"></li>
        <li id="r"><span><img class="piece" src="vazirRed.png"></span>Red Player<input type="text" id="input" value="name"><button onclick="writeIt();">go</button></li>

        <li><span><img class="piece" src="vazirBlue.png"></span>Blue Player<input type="text" value="name"><button onclick="writeIt();">go</button></li>
    </ul>
</div>

JavaScript

function writeIt(){
    var inputRed=document.getElementById("input");
    var redName = inputRed.value;
    document.getElementById("r").innerHTML += redName;
}