JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="one" id="buttonX">
<input type="text" value="one" id="textX">

JavaScript

///
/// Demonstrates an annoying "feature" of the DOM.
///

// Set the "value" property of each element
document.getElementById("buttonX").value = "two";
document.getElementById("textX").value = "two";

// Set the "value" attribute of each element.
// Note that the visual text in the text input
// element will NOT be updated. This is because
// for text input elements, the "value" attribute
// only sets the initial text in the widget, not
// current text. For button input elements, the
// "value" attribute sets the current text in the
// widget.
document.getElementById("buttonX").setAttribute("value","three");
document.getElementById("textX").setAttribute("value","three");