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

// when one of buttons clicked this func will execute
function buttonClick (e) {
	
    var input = e.target;
    
    // alert different message for different buttons
			switch(input.getAttribute('id')) {
				case "english":
				alert("Hello! How are you?");
				break;
				case "spanish":
				alert("Hola! Como estas?");
				break;
				case "hebrew":
				alert("Shalom!");
				break;
				case "frech":
				alert("Bonjour!");
				break;
				default:
				alert("Unexpected button pressed ...i don't know what to say");
			}
	}
    
    
    //store buttons in variable buttonsList
	var buttonsList = document.getElementsByTagName("input");

    //iterate through all elements of buttonList and attach event handler if they are buttons (not all input elements are buttons)
	for (var i = 0; i<buttonsList.length; i++) {
        var input=buttonsList[i];
        if (input.getAttribute('type')=='button') {
            input.onclick = buttonClick;
        }
    }