JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul style="list-style-type:none" id="buttons">
        <li>
            <input type="button" value="English" id="english" />
        </li>
        <li>
            <input type="button" value="Spanish" id="spanish" />
        </li>
        <li>
            <input type="button" value="Hebrew" id="hebrew" />
        </li>
        <li>
            <input type="button" value="French" id="frech" />
        </li>
    </ul>
    </body

JavaScript

function buttonClick () {
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById(id)) return false;
	if(!document.getAttribute("id")) return false;
	//store buttons in variable buttonsList
	var buttonsList = document.getElementsByTagName("input");
			//iterate through all elements of buttonList
			for (var i = 0; i<buttonsList.length; i++) {
			//store each element to the variable buttons and get each individual id for each button
				var buttons = buttonsList[i].getElementById("id");
				//when a button is clicked, display the alert box with the message corresponding to each language
				switch(buttons) {
				case "english":
				alert("Hello! How are you?");
				break;
				case "spanish":
				alert("Hola! Como estas?");
				break;
				case "hebrew":
				alert("Shalom!");
				break;
				case "french":
				alert("Bonjour!");
				break;
				default:
				alert("Please select a language");
			}
			buttons.onclick = buttonClick(this);
		}
	}