JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="input" type="text">
<br><br>
This is the message: <span id="output"></span>
JavaScript
var $input = $('#input');
var $output = $('#output');
// A controller for getting/setting the bound variable
var message = {
content: null,
get: function() {
return this.content;
},
set: function(val) {
this.content = val;
$output.html(val);
$input.val(val);
}
};
// Listens for changes in input
$input.on("keyup", function() {
message.set($(this).val());
});
message.set('jQuery data binding is less good');