JSFiddle - React, Tailwind, and code Playground

HTML

The text of the <b>DIV</b> element will always change as it uses the <i>.html()</i> method.
<div id="div_test">Default text ...</div>
<br>
    Everything works fine if you change the input-box's value using either <i>.val()</i> or <i>.prop()</i> methods -- unless the updated value can not be read by <i>.attr()</i> method. However if you use <i>.attr()</i> method to change the value, then both <i>.val()</i> and <i>.prop()</i> methods won't be able to read the updated value of the input box.
<br><br>
<input id="textbox_test" type="textbox" value="Default text ...">
<br><br>
Set: <input id="_txt" type="textbox" placeholder="Type here ...">

<input id="_attr" type="button" value=".attr()">
<input id="_val" type="button" value=".val()">
<input id="_prop" type="button" value=".prop()">
    
<br><br>
    
The current value of <span style="color: red;">red</span> input box by <i>.attr()</i> method: <span id="attr_read_value"></span>
<br>
The current value of <span style="color: red;">red</span> input box by <i>.val()</i> method: <span id="val_read_value"></span>
<br> 
The current value of <span style="color: red;">red</span> input box by <i>.prop()</i> method: <span id="prop_read_value"></span>

CSS

* {
    font-family: tahoma;
    font-size: 11pt;
}

i { 
    background: #eaeaea; 
}

#div_test {
    width: 160px;
    background: lightgreen;
}

#textbox_test {
    width: 160px;
    background: red;
    color: white;
    border: 0;
}

JavaScript

$("#_attr").click(function() {
    var text = $("#_txt").val() + ' - via attr()'; // the user input
    $("#div_test").html(text);                     // div element
    $("#textbox_test").attr("value", text);        // red input box
    read();
});

$("#_val").click(function() {
    var text = $("#_txt").val() + ' - via val()';
    $("#div_test").html(text);
    $("#textbox_test").val(text);
    read();
});

$("#_prop").click(function() {
    var text = $("#_txt").val() + ' - via prop()';
    $("#div_test").html(text);
    $("#textbox_test").prop("value", text);
    read();
});

var read = function () { 
    
    // reseting previous texts
    $("#attr_read_value").text();
    $("#val_read_value").text();
    $("#prop_read_value").text();
    
    // reading the new values
    var attr_get = $("#textbox_test").attr("value");
    var val_get = $("#textbox_test").val();
    var prop_get = $("#textbox_test").prop("value");
    
    // updating ...
    $("#attr_read_value").text(attr_get);
    $("#val_read_value").text(val_get);
    $("#prop_read_value").text(prop_get);
}